useEffect가 자꾸 동작해요

Question

안녕하세요. 너무 궁금하고 미치겠어서 처음으로 질문 글을 올려봅니다..제가 생각하는 useEffect는 렌더링 시 발동하는데, 의존성 배열에 따라 작동이 할 수도 안 할 수도 있다고 생각합니다.// 오늘 날짜 const date &#61; getCurrentDate();하지만 아래의 코드를 보면 date는 변하지 않았는데 자꾸 axios 호출이 되는 모습을 볼 수 있습니다. (여기서 date는 오늘 날짜 입니다. 하루를 주기로 날짜가 바뀔 때마다 useEffect가 실행되도록 의도했는데 이게 잘 안됩니다.)useEffect(() &#61;> { const getMovie &#61; async () &#61;> { dispatch(apiLoadingAction.isLoading(true)); // api 호출 동안 스켈레톤 UI on try { const res &#61; await axios({ method: &#34;GET&#34;, url: url, }); let movieList; switch (sortedMovie) { case &#34;dailyBoxOffice&#34;: movieList &#61; res.data.boxOfficeResult.dailyBoxOfficeList; break; case &#34;weeklyBoxOffice&#34;: movieList &#61; res.data.boxOfficeResult.weeklyBoxOfficeList; break; case &#34;koreaMovieList&#34;: movieList &#61; res.data.movieListResult.movieList; break; case &#34;japenMovieList&#34;: movieList &#61; res.data.movieListResult.movieList; break; case &#34;usMovieList&#34;: movieList &#61; res.data.movieListResult.movieList; break; case &#34;etcMovieList&#34;: movieList &#61; res.data.movieListResult.movieList; break; default: break; } // 포스터 정보를 추출하는 함수 실행 const moviesWithPosters &#61; await Promise.all(movieList.map((movie) &#61;> getPoster(movie))); // 영화 정보에 포스터 정보까지 합쳐서 저장 const updatedMovieList &#61; movieList.map((movie, index) &#61;> ({ ...movie, poster: moviesWithPosters[index], })); switch (sortedMovie) { case &#34;dailyBoxOffice&#34;: dispatch(TodayMovieChartAction.isLoading(updatedMovieList)); break; case &#34;weeklyBoxOffice&#34;: dispatch(WeekendMovieChartAction.isLoading(updatedMovieList)); break; case &#34;koreaMovieList&#34;: dispatch(koreaMovieListAction.isLoading(updatedMovieList)); break; case &#34;japenMovieList&#34;: dispatch(japenMovieListAction.isLoading(updatedMovieList)); break; case &#34;usMovieList&#34;: dispatch(usMovieListAction.isLoading(updatedMovieList)); break; case &#34;etcMovieList&#34;: dispatch(etcMovieListAction.isLoading(updatedMovieList)); break; default: break; } dispatch(apiLoadingAction.isLoading(false)); // api 호출 끝나면 스켈레톤 UI off } catch (error) { console.error(&#34;Error fetching movie data:&#34;, error); } }; // 포스터 정보를 추출하는 함수 const getPoster &#61; async (movie) &#61;> { try { const json &#61; await axios({ method: &#34;GET&#34;, url: &#96;https://api.koreafilm.or.kr/openapi-data2/wisenut/search_api/search_json2.jsp?collection&#61;kmdb_new2&detail&#61;Y&title&#61;${ movie.movieNm }&releaseDts&#61;${movie.openDt.replaceAll(&#34;-&#34;, &#34;&#34;)}&ServiceKey&#61;${process.env.REACT_APP_POSTERS_SECRETKEY}&#96;, }); const posterURL &#61; json.data.Data[0].Result[0].posters.split(&#34;|&#34;)[0]; return posterURL; } catch (error) { console.error(&#34;Error fetching poster:&#34;, error); } }; getMovie(); }, [date]);

크롱크롬 · Accepted Answer

맞습니다. 코드에서 getCurrentDate() 함수를 호출하여 date를 초기화하고 있습니다. 이렇게 하면 매번 컴포넌트가 렌더링될 때마다 date가 새롭게 생성되므로 useEffect의 의존성 배열에 date를 추가하더라도 의미가 없게 됩니다. useEffect는 해당 값들이 변경될 때만 실행되기 때문입니다.해결책으로는 getCurrentDate()를 useEffect 내부에서 호출하게끔 수정하면 됩니다. 또는 date 상태를 useState로 관리하고, 필요한 때에만 업데이트하도록 하면 됩니다.const [date, setDate] = useState(getCurrentDate());useEffect(() => { const getMovie = async () => { // ... (기존 코드) try { const res = await axios({ method: "GET", url: url, }); // ... (기존 코드) dispatch(apiLoadingAction.isLoading(false)); } catch (error) { console.error("Error fetching movie data:", error); } }; // ... (기존 코드) getMovie();}, [date]);

useEffect가 자꾸 동작해요

1개의 답변

#axios 목록