banner 재질문

Question

banner.js 파일 첨부해드립니다. 콘솔 창을 위해서 몇가지 코드가 추가되어있습니다. 콘솔 창은 f5 이후로 아무것도 건드리지 않았습니다. return 직전에 console.log("hi")를 넣었습니다. 콘솔에 실행해본 결과 return 이전의 코드가 실행되기도 전에 hi가 실행된 것을 확인할 수 있었습니다. 왜 이전의 코드가 실행되기도 전에 hi와 return이 먼저 실행되는 걸까요? 아무것도 누르지 않은 상태인데 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 (

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

{truncate(movie.overview, 100)}

); }else{ return

} } 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%; }`

John Ahn · Answer

안녕하세요
1. 자바스크립트 소스코드는 위에서 아래로 실행됩니다. 또한 hi 같은 경우는 함수에 들어있는것도 render부분에 있는것도 useEffect 훅 안에 있는 것도 아니기에 생명주기 실행 순서에 관계 없이 가장 먼저 실행됩니다.

2. useeffect에 있는것이 처음에 두번호출되는 이유는 React StrictMode를 사용하셔서 그렇게 되는 것 입니다.
이것은 개발 단계에서만 발생하며 렌더 단계에서 우발적인 부작용을 찾는 데 도움이 됩니다.
만약에 이걸원치 않으시면 index.js 에 있는 React.StricMode를 없애주시면 됩니다.

감사합니다.