인프런 커뮤니티 질문&답변

banner.js 파일 첨부해드립니다. 콘솔 창을 위해서 몇가지 코드가 추가되어있습니다. 콘솔 창은 f5 이후로 아무것도 건드리지 않았습니다.

1. return 직전에 console.log("hi")를 넣었습니다. 콘솔에 실행해본 결과 return 이전의 코드가 실행되기도 전에  hi가 실행된 것을 확인할 수 있었습니다. 왜 이전의 코드가 실행되기도 전에 hi와 return이 먼저 실행되는 걸까요?
2. 아무것도 누르지 않은 상태인데 
   useEffect(() => {

       fetchData();

     }, []);

   에서 dep list가 빈 배열이기 때문에 banner.js 가실행되는 때 딱 한번만 실행된다고 생각했습니다. 하지만 콘솔 창을 보니 다 log가 두번씩 찍혀있는데 이게 왜 그런건가요?

 

import axios from "../api/axios";

import React, { useEffect, useState } from "react";

import requests from "../api/requests";

import "./Banner.css";

import styled from "styled-components";

export default function Banner() {

  const [movie, setMovie] = useState([]);

  const [isClicked, setIsClicked] = useState(false);

  useEffect(() => {

    fetchData();

  }, []);

  const fetchData = async () => {

    // 현재 상영중인 영화 정보를 가져오기(여러 영화)

    const request = await axios.get(requests.fetchNowPlaying);

    console.log("1. request.data",request.data)

    // 여러 영화 중 영화 하나의 ID를 가져오기

    const movieId =

      request.data.results[

        Math.floor(Math.random() * request.data.results.length)

      ].id;

    // 특정 영화의 더 상세한 정보를 가져오기(비디오 정보도 포함)

    const { data: movieDetail } = await axios.get(`movie/${movieId}`, {

      params: { append_to_response: "videos" },

    });

    setMovie(movieDetail);

    console.log("2. request.data",request.data)

    // console.log("movieDetail",movieDetail)

    // console.log("movie",movie)

  };

   

    const truncate = (str, n) => {

        return str?.length > n ? str.substr(0, n-1) + "..." : str;

    }

    console.log('hi')

    if(!isClicked){

        return (

            <header

              className="banner"

              style={{

                backgroundImage: `url("https://image.tmdb.org/t/p/original/${movie?.backdrop_path}")`,

                backgroundPosition: "top center",

                backgroundSize: "cover",

              }}

            >

              <div className="banner__contents">

                <h1 className="banner__title">

                  {movie.title || movie.name || movie.original_name}

                </h1>

     

                <div className="banner__buttons">

                  <button className="banner__button play" onClick = {() => setIsClicked(true)}>Play

                  </button>

                  <button className="banner__button info">More Information</button>

                </div>

     

                <h1 className="banner__description">{truncate(movie.overview, 100)}</h1>

              </div>

              <div className="banner--fadeBottom" />

            </header>

          );

    }else{

        return <div>

            <Container>

                <HomeContainer>

                  <Iframe>

                  src={`https://www.youtube.com/embed/${movie?.videos?.results[0]?.key}?controls=0&autoplay=1&loop=1&mute=1&playlist=${movie?.videos?.results[0]?.key}`}

                    width = "640"

                    height = "360"

                    frameborder = "0"

                    allow = "autoplay; fullscreen"

                  </Iframe>

                </HomeContainer>

            </Container>

        </div>

    }

   

  }

  const Container = styled.div`

    display : flex;

    justify-content : center;

    align-items : center;

    flex-direction : column

    width : 100%;

    height : 100vh;

  `

  const HomeContainer = styled.div`

    width : 100%;

    height : 100%;

  `

  const Iframe = styled.iframe`

    width : 100%;

    height : 100%;

    z-index : -1;

    opacity : 0.65;

    border : none;

   

    &::after{

      content : "";

      position : absolute;

      top : 0;

      left : 0;

      width : 100%;

      height : 100%;

    }`