React에서 option 태그 변경시 기존 데이터 출력 문제.

Question

const [movies, setMovies] = useState([]); const [page, setPage] = useState(1); const [sortOption, setSortOption] = useState("popularity.desc"); const getMovies = () => { fetch(url, getOptions()) .then(res => res.json()) .then(res => { setMovies(res.results); setLoading(false); setPage((prev) => prev+1); }).catch(err => console.error(err)); }; // 페이지 진입시 최초 영화 호출 및 정렬 옵션 변경시 호출 useEffect(() => { // 페이지가 1로 리셋되거나, 페이지가 변경되면 API 호출 if (page === 1) { getMovies(); } }, [page]); // 정렬 옵션 변경시 useEffect(() => { // 페이지를 1로 리셋하고 API 호출 setPage(1); }, [sortOption]);

{ movies.map((movie, idx) => { console.log(idx + `:(제목, ${movie.title}), (투표수, ${movie.vote_count}"), (평점, ${movie.vote_average})`) return }) }

현재 React를 이용해서 영화 페이지를 만들고 있는데요, 만들고 있는 기능이영화 목록 페이지에서 의 onChange 함수가 실행되고 setSortOption() 이 실행되어 sortOption 의 값을 변경하고 두번째 useEffect 가 실행됩니다. 이때 page state의 값을 1로 변경합니다.page state의 값을 설정했으니 다시 첫번째 useEffect 가 실행되고 정렬옵션 url을 기반으로 api를 호출합니다.그리고 getMovies 가 호출되고 movies state를 변경했기에 화면은 리렌더링 됩니다.여기까지가 진행 과정인데 어디서 이전 영화목록이 호출되는걸까요? 그러니까 위 과정을 예시로최초 첫 영화목록이 화면에 뿌려져있고, 정렬 옵션을 선택하면 콘솔창에 이 최초 첫 영화목록이 출력되고 이후에 새로 불러온 목록이 출력됩니다.어디가 문제일까요? setSortOption이나 setPage 같은 state를 변경하는 과정에서 리렌더링되고 그때 기존 영화목록들이 호출되는걸까요..?맞다면 어떻게 해결해야할까요?

월급은나의빛 · Accepted Answer

현재 실제로 두 번 render 됩니다.(App 컴포넌트 처음에 console.log("---- BEGIN rendering"); 를 넣어 보면 아실 겁니다)page 값이 변했기 때문에 일어나는 render이 때는 아직 movies 리스트가 변하지 않았습니다. 그래서 기존 movie 가 찍힙니다.fetch 응답을 받았기 때문에 일어나는 render 이제 movies 가 setMovies 로 변경되었습니다. 그래서 새로운 movie들이 찍힙니다.이 문제를 해결하려면 정렬 옵션 변경시 setPage 대신에 getMovies를 불러야 합니다. 그리고 getMovies가 성공하고 난 후에, setPage로 페이지 값을 변경합니다. (이 때까지는 render 가 일어나지 않습니다)예제는 다음 페이지를 참조하십시오.예제 페이지소스는 다음과 같습니다.import "./styles.css"; import MovieListCard from "./MovieListCard"; import { useEffect, useRef, useState } from "react"; function App() { console.log("---- BEGIN rendering"); const [page, setPage] = useState(1); const [movies, setMovies] = useState([]); const loading = useRef(false); const [sortOption, setSortOption] = useState("popularity.desc"); const options = { method: "GET", headers: { accept: "application/json", Authorization: "Bearer ...", }, }; const getMovies = (pageToFetch) => { const url = `https://api.themoviedb.org/3/discover/movie?include_adult=false &include_video=false&language=en-US&page=${pageToFetch}&sort_by=${sortOption}`; loading.current = true; fetch(url, options) .then((res) => res.json()) .then((res) => { setMovies(res.results); loading.current = false; setPage(pageToFetch); }) .catch((err) => { console.error(err); loading.current = false; }); }; // 정렬 옵션 변경시 useEffect(() => { getMovies(1); }, [sortOption]); const handlePrev = () => { if (page > 1 && !loading.current) { getMovies(page - 1); } }; const handleNext = () => { if (!loading.current) getMovies(page + 1); }; return (

{page}

{movies.map((movie, idx) => { console.log( idx + `:(제목, ${movie.title}), (투표수, ${movie.vote_count}"), (평점, ${movie.vote_average})` ); return ( ); })}

); } export default App;

React에서 option 태그 변경시 기존 데이터 출력 문제.

1개의 답변

Q&A 목록