리액트 및 자바스크립트에서 변수 값 변화

Question

let page &#61; 1; const url &#61; &#96;https://api.themoviedb.org/3/discover/movie?include_adult&#61;false&include_video&#61;false&language&#61;en-US&page&#61;${page}&sort_by&#61;popularity.desc&vote_average.gte&#61;2.5&#96;; const getMovies &#61; () &#61;> { fetch(url, getOptions()) .then(res &#61;> res.json()) .then(res &#61;> { setMovies(res.results); setLoading(false); page &#43;&#61; 1; setPage((prev) &#61;> prev&#43;1); }).catch(err &#61;> console.error(err)); }; useEffect(() &#61;> { getMovies(); }, []); useEffect(() &#61;> { const loadNextPage &#61; () &#61;> { const { scrollTop, clientHeight, scrollHeight } &#61; document.documentElement; if (!loadingPage && scrollTop &#43; clientHeight >&#61; scrollHeight - 5) { setloadingPage(true); fetch(url, getOptions()) .then(res &#61;> res.json()) .then(res &#61;> { setMovies((curMovies) &#61;> [...curMovies, ...res.results]); setPage(prev &#61;> prev&#43;1); page &#43;&#61; 1; setloadingPage(false); }).catch(err &#61;> { console.error(err); setloadingPage(false); }); } } window.addEventListener('scroll', loadNextPage); return () &#61;> window.removeEventListener('scroll', loadNextPage); }, [loadingPage]);위 코드는 영화 api 목록을 페이지에 불러오고 스크롤할때마다 추가로 영화 목록을 불러오는 것입니다. 다름이 아니라 궁금증이 생겨 실험(?)도중 궁금한것이 생겨 질문드립니다.기존 코드는 두번째 useEffect 에서 page state 도 함께 감시하여 스크롤할떄마다 page 값을 변화 시켜 이벤트를 발생시키는 그러한 코드였습니다.이후에 그냥 loadingPage state 를 감시하고 이 값이 변하면 리렌더링되니까 page state 없어도 되지 않을까? 라는 생각에 없애고 위 코드와 같이 작성했습니다. 결과는 안됐는데 위 코드는 page state에서 일반 변수로 page를 변경했는데 여기서 궁금한 점이 생겼습니다. 제 생각으로는 url에 있는 {page} 로 변화 된 값으로 api를 호출하니 렌더링이 안되더라도 적어도 불어오는 api는 최신 page의 api를 불러와야한다고 생각했습니다.그런데 콘솔창에 찍어보니 page 값은 업데이트 되는데 불러오는 api는 여전히 1페이지만 불러옵니다.page가 state가 아니니 리렌더링은 안될것으로 압니다만, 적어도 page의 값은 변화하고 이 값을 기반으로 url은 사용하고 api를 호출하는데왜 같은 값만 호출되나요? loadingPage가 호출되면서 이벤트도 새 값으로 분명 갱신될거라고 생각했는데..

월급은나의빛 · Accepted Answer

저번에 설명했는데 그냥 흘려 들으셨군요.아래의 scroll hander 에서는 useEffect를 사용하지 않습니다. react 컴포넌트에서 onScroll로 처리하는 방식이기 때문입니다. 그렇게 하면 page 는 저절로 render 할 때마다 최신값으로 갱신됩니다.예제 구현 : React App리액트에서는 되도록이면 addEventHandler를 안 쓰는 방향으로 가르치고 배워야 할 것 같은데, 아직도 많이 쓰네요.왜 page 값이 갱신되지 않느냐에 대해서 설명드리자면,page는 useState() 로 만들어지는 변수는 setPage로 변경이 일어나면, 다음 render 에서 page 변수의 reference 가 바뀝니다. 즉, 첫번째 render 에서 page &#61; 1 이고 setPage(2) 가 호출되었다면 page 변수 주소에 저장된 값이 2로 바뀌는 게 아니고, page 라는 변수가 새로 만들어지고 그 값이 2가 됩니다. 즉 기존 주소를 버리고 새로운 주소를 가리킵니다.그런데 addEventHandler 로 등록한 vanilla javascript 핸들러는 page 변수가 새로 만들어졌다는 것을 모릅니다. 그래서 예전 page 변수 주소를 page라고 생각하고 있습니다. 그 때문에 값이 바뀌지 않습니다.

킁킁탐정 · Answer

컴포넌트 함수 내에서 정의된 page 같은 변수는 컴포넌트가 리렌더링될때 마다 "재정의" 됩니다.그러므로 let page = 1은 절대 불변의 영원한 1을 유지하게 됩니다.useEffect는 컴포넌트를 리렌더링딩 한다는 점과 함께 생각하시면 어떻게 해도 page 값의 변화를유지할수가 없습니다. 그래서 useRef 같은것을 이런 경우에 사용합니다.공식 문서에 자세하게 이에 대해 나와있습니다.https://react.dev/

리액트 및 자바스크립트에서 변수 값 변화

2개의 답변

Q&A 목록