React 에러를 해결했는데 이유를 모르겠습니다.

Question

얼마전 질문글을 올렸고 해결은 했는데 왜 이런 일이 발생하고 해결됐는지 이해를 잘 못하겠습니다..해결했으면 된거아니냐 라고 할 수도 있지만 지금 왜 발생하는지 이해해야 제가 편할거같고 다음에 비슷한 상황에서 잘 대처할수 있을것같아서 그렇습니다..상황은 영화 API를 호출해서 영화 목록을 보여주는 페이지에서 최초 API 호출후 스크롤하여 스크롤이 제일 하단에 가면 다음 api 페이지를 로드하는 그러한 기능을 만들 고 있습니다.코드입니다.function MovieList() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); const [page, setPage] = useState(1); const url = `https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=${page}&sort_by=popularity.desc&vote_average.gte=2.5`; const getMovies = () => { ... // 최초로 영화 api를 호출 console.log("최초 API 호출 : ", page); // << 두번 호출 }; useEffect(() => { // 최초 한번만 실행 getMovies(); }, []); // 페이지 끝 감지 및 다음 페이지 로드 useEffect(() => { const getNexPage = () => { const { scrollTop, clientHeight, scrollHeight } = document.documentElement; if (scrollTop + clientHeight >= scrollHeight - 20) { const nextPage = page; console.log("로드될 페이지", page); const url = `https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=${nextPage}&sort_by=popularity.desc&vote_average.gte=2.5`; const options = { method: 'GET', headers: { accept: 'application/json', Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYmVlZjY1MTM4MTBmMTRmYmJjMzljNTQ1MzIzNzkxZSIsIm5iZiI6MTcyMTQ2MzI3OS44MzM5OTk5LCJzdWIiOiI2NjliNzFlZjU1N2QxMjJlODUxODFmYjUiLCJzY29wZXMiOlsiYXBpX3JlYWQiXSwidmVyc2lvbiI6MX0.xCyd-F_0snlSKX3t4LgkZ4yL55lY-r_bVUKNP5SoxhI' } }; fetch(url, options) .then(res => res.json()) .then(res => { setMovies((curMovies) => [...curMovies, ...res.results]); setLoading(false); setPage(prev => prev+1); console.log("test", res); }).catch(err => console.error(err)); } } window.addEventListener('scroll', getNexPage); return () => window.removeEventListener('scroll', getNexPage); }, [page]); return ( <> {loading ? ( ... ) : (<>

...

{ movies.map((movie, idx) => ( )) }

)} ); }이제 발생한 문제들 입니다.첫번째로 페이지를 최초 로드하면 다음 사진에서 보이는것처럼 콘솔창에 api가 두번 호출되는 것같습니다.최초 API 호출 이 콘솔창에 두번 호출되어있습니다. 페이지를 로드하는데 api가 두번 호출되는 것도 이상한데 uesEffect 를 사용하면 최초 딱 한번만 실행하도록 하는 것으로 알고 있는데 여전히 두번 호출되고 있는게 이상합니다.이건 어떻게 찾아보니 index,js 파일에 있는 태그를 지워주니 해결 되더라구요.const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <<< 제거 <<< 제거 );저게 뭐 경고를 하기위한 의도적인 거라고하던데.. 왜 이걸 쓰는건지 저도 정확하게 모르겠습니다.이것때문에 딱 한번만 실행한다는 uesEffect가 두번 실행되어 사진에서처럼 1페이지가 호출되고 그다음 로드될 페이지가 3으로 바로 건너뜁니다.이걸 지우니 두가지 문제가 해결됐는데 검색해보니 이게 뭘 경고하기 위한거라고하니 지우기도 찝찝하네요...이게 꼭 필요한 태그인가요?두번째로 Warning: Encountered two children with the same key 에러입니다.스크롤 하단 도착해서 페이지를 로드하면 페이지는 로드 되나 콘솔창에 저런 에러가 뜨더라구요. 키 중복 문제라는데영화 API에서 중복될리 없는 id 를 사용해서 이상하다 싶었는데 콘솔창에 찍어보니 스크롤 끝에 도착해 페이지 로드시가끔 한번에 같은 api를 두번 호출합니다.. 다음과 같이 1페이지 후 2페이지 로드하려할떄 같은 페이지를 두번 불러옵니다..이 문제는 엊그제 알려주셔서 key 속성의 값을 map의 인덱스로 설정하는것으로 문제 해결은 했지만 왜 스크롤시 두번 호출되는지는 모르겠습니다..두가지 문제에 대해 왜 이런 일이 발생하는지 알려주시면 감사하겠습니다

월급은나의빛 · Accepted Answer

addEventListener를 사용하지 않는 react 방식의 스크롤링은 이렇게 하는 거네요.예제 구현 : React App function App() { const [page, setPage] = useState(1) const [movies, setMovies] = useState([]) const loading = useRef(false) const handleScroll = (event) => { const element= event.target const { scrollTop, clientHeight, scrollHeight } = element; console.log(scrollTop, clientHeight, scrollHeight) if (scrollTop + clientHeight >= scrollHeight) { if (loading.current) return const nextPage = page; console.log("로드될 페이지", page); const url = `https://api.themoviedb.org/3/discover/movie?include_adult=;false&include_video=false&language=en-US&page=${nextPage}&sort_by=popularity.desc&vote_average.gte=2.5`; const options = { method: 'GET', headers: { accept: 'application/json', Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYmVlZjY1MTM4MTBmMTRmYmJjMzljNTQ1MzIzNzkxZSIsIm5iZiI6MTcyMTQ2MzI3OS44MzM5OTk5LCJzdWIiOiI2NjliNzFlZjU1N2QxMjJlODUxODFmYjUiLCJzY29wZXMiOlsiYXBpX3JlYWQiXSwidmVyc2lvbiI6MX0.xCyd-F_0snlSKX3t4LgkZ4yL55lY-r_bVUKNP5SoxhI' } }; loading.current = true fetch(url, options) .then(res => res.json()) .then(res => { setMovies((curMovies) => [...curMovies, ...res.results]); loading.current = false setPage(prev => prev+1); console.log("test", res.results); }).catch(err => { console.error(err) loading.current = false }); } } return (

{movie.id} -- {movie.title}

{page}

); }

leon808 · Answer

strict mode 자체가 컴포넌트 잘 작동하는지 확인하려고 의도적으로 렌더링 두번 시킵니다 strict mode 껐는데도 api 호출 두번 된다면 코드 잘못 짜서 그런거겠죠

답변하면인사라도해주세요 · Answer

strictmode 가 원래 그렇게 작동합니다 플래그를 세워 이미 초기화되었는지 확인하는 방식으로 우회가능합니다

kenu,전독시 · Answer

개발할 때 버그를 미리 찾으라고 만든 것이 StrictMode로 알고 있습니다.로컬에서 2샷은 그런 로그라고 알고 있는데, 코드가 너무 예민하게 짜인 듯합니다.

월급은나의빛 · Answer

– React 로 감싼 부분의 컴포넌트는 괜히 두 번 렌더링 됩니다. 두번째 useEffect 끝부분의 page 변수에 대한 dependency를 지워보세요. return () => window.removeEventListener('scroll', getNexPage); }, [page]); <--- page 있으면 안 됨

월급은나의빛 · Answer

이게 쉬운 문제가 아니네요.중복된 리스트가 응답으로 돌아오는 이유는 useState로 정의된 변수 loading 의 사용이 scroll 에 사용하기 부적절하기 때문입니다. useState에서 정의한 변수는 다음 번 렌더링에 값이 바뀝니다. 스크롤 핸들러에서는 setLoading(true) 를 호출해도 바로 반영되지 않고, 다음번 핸들러 호출시에 false 값이 나옵니다. const [loading, setLoading] 은 React Component에서 사용가능하지만, javascript DOM 함수인 addEventListener에서 사용하기엔 부적절하고, 특히 scroll 에 대해서는 효과가 없습니다.다음과 같이 구현해야 합니다. synchronous 하게 값이 바뀌는 useRef를 쓴 점에 유의하시면 됩니다. const [page, setPage] = useState(1) const [movies, setMovies] = useState([]) const loading = useRef(false) useEffect(() => { const handleScroll = () => { const { scrollTop, clientHeight, scrollHeight } = document.documentElement; console.log(scrollTop, clientHeight, scrollHeight) if (scrollTop + clientHeight >= scrollHeight - 120) { if (loading.current) return const nextPage = page; console.log("로드될 페이지", page); const url = `https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=${nextPage}&sort_by=popularity.desc&vote_average.gte=2.5`; const options = { method: 'GET', headers: { accept: 'application/json', Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYmVlZjY1MTM4MTBmMTRmYmJjMzljNTQ1MzIzNzkxZSIsIm5iZiI6MTcyMTQ2MzI3OS44MzM5OTk5LCJzdWIiOiI2NjliNzFlZjU1N2QxMjJlODUxODFmYjUiLCJzY29wZXMiOlsiYXBpX3JlYWQiXSwidmVyc2lvbiI6MX0.xCyd-F_0snlSKX3t4LgkZ4yL55lY-r_bVUKNP5SoxhI' } }; loading.current = true fetch(url, options) .then(res => res.json()) .then(res => { setMovies((curMovies) => [...curMovies, ...res.results]); loading.current = false setPage(prev => prev+1); console.log("test", res.results); }).catch(err => { console.error(err) loading.current = false }); } } window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, [page]); 이건 정답이 아니고 이렇게 하면 스크롤시 요청 중복이 없도록 할 수 있다는 것입니다. 스스로 연구를 해 보세요.

React 에러를 해결했는데 이유를 모르겠습니다.

6개의 답변

Q&A 목록