리액트 무한 리렌더링 문제 질문

Question

안녕하세요. 다름이 아니라 리액트로 프로젝트 진행 중인데 fetch 해서 데이터를 불러와서 setState를 해주는 부분에서 무언가 문제가 발생해서 무한 리렌더링이 발생하네요.문제가 발생하는 화면이고요. import React, {useEffect, useState} from 'react'; import MovieInfo from './Sections/MovieInfo'; import CreditsInfo from './Sections/CreditsInfo'; import {siteTitle, movieLang, countriesLang, movieApiBaseUrl, movieImageBaseUrl} from '../../Config'; function MovieDetailPage(props) { const [movieItems, setMovieItems] = useState([]); const [creditsItems, setCreditsItems] = useState([]); const [creditsToggle, setCreditsToggle] = useState(false); const [isLoadingMovie, setIsLoadingMovie] = useState(true); const [isLoadingCredits, setIsLoadingCredits] = useState(true); const [isMovieHaveWebsite, setIsMovieHaveWebsite] = useState(true); const [mode, setMode] = useState("Loading"); const api_key = process.env.REACT_APP_MOVIEDB_API_KEY; const movieId = props.match.params.movieId; const creditsInfo = `${movieApiBaseUrl}${movieId}/credits?api_key=${api_key}`; const movieInfo = `${movieApiBaseUrl}${movieId}?api_key=${api_key}&language=ko-KR`; const overviewURL = `${props.match.params.movieId}/overview`; useEffect(() => { fetchItems(); }, []); const fetchItems = () => { if(isLoadingMovie) { fetch(movieInfo) .then(res => res.json()) .then(data => { data.poster_path = `${movieImageBaseUrl}original${data.poster_path}`; document.title = `${data.title} - ${siteTitle}`; // change the title // 언어 data값 문자열 한국어로 번역 for(let index = 0; index < data.spoken_languages.length; index++) data.spoken_languages[index].name = movieLang[data.spoken_languages[index].english_name]; for(let index = 0; index < data.production_countries.length; index++) data.production_countries[index].name = countriesLang[data.production_countries[index].iso_3166_1]; console.log(data); setMovieItems(data); setMode("Normal"); setIsLoadingMovie(false); }) .catch(err => { setMode("404"); }); } if(isLoadingCredits) { fetch(creditsInfo) .then(res => res.json()) .then(data => { for(let index = 0; index < data.cast.length; index++) if(data.cast[index].profile_path !== null) data.cast[index].profile_path = `${movieImageBaseUrl}original${data.cast[index].profile_path}`; else data.cast[index].profile_path = '/img/profile_image_unknown.jpg'; console.log(data); setCreditsItems(data); setCreditsToggle(true); setIsLoadingCredits(false); }) .catch(err => { setMode("404"); }); } } if(movieItems.homepage === "") setIsMovieHaveWebsite(false); const movieWebsiteLinkRender = isMovieHaveWebsite ? ( ) : ( ) if(mode === "Loading") { return (

Loading...

); } else if(mode === "404") { return (

404 Not Found.

); } return (

{movieWebsiteLinkRender}

{movieItems.title}

{creditsToggle && }

); } export default MovieDetailPage; 이게 소스코드인데, 찾아보니까 useEffect 끝부분에 빈 배열 형태로 넣어주면 된다는 글을 봐서 했는데도 문제는 여전하네요. 어떤 문제가 있는걸까요?

페코옹 · Answer

setstate 함수를 바로 쓰지 마세요 아래를 if(movieItems.homepage === "") setIsMovieHaveWebsite(false); React.useEffect(() => { if(movieItemd.hompage === ""){ setIsMovieHaveWebsite(false); }},[movieItemd.hompage]) 와 같이 사용하세요 그리고 상기 코드에서 isMovieHaveWebsite 를 state로 관리할 필요없이 그냥 if(movieItems.homepage === "") setIsMovieHaveWebsite(false); const movieWebsiteLinkRender = isMovieHaveWebsite ? ( ) : ( ) 이 부분을 아래 처럼 하세요.moveItems 가 state이니 굳이 다시 state로 관리할 필요 없습니다. const movieWebsiteLinkRender = movieItems.homepage === "" ? ( ) : ( ) 그리고 전체적으로 코드에 문제가 많습니다. 다시 잘 고민해보세요

데버 · Answer

&#64;페코옹정말 감사합니다. 정확한 이유는 아직 잘 이해가 가지 않았습니다만, 말씀하신대로 코드를 수정했는데 오류는 해결된 것으로 보입니다. 지적해주신 부분도 코드 리팩토링을 진행하겠습니다.

리액트 무한 리렌더링 문제 질문

2개의 답변

Q&A 목록