리액트 hook useState 질문입니다.

Question

리액트를 공부중인데, 리액트의 함수형 컴포넌트에서 사용하는useState에 대해 궁금한 점이 있어서 질문드립니다. const [Movies, setMovies] &#61; useState([]); const [MainMovie, setMainMovie] &#61; useState(null); const [CurrentPage, setCurrentPage] &#61; useState(0); useEffect(() &#61;> { const endpoint &#61; &#96;${API_URL}movie/popular?api_key&#61;${API_KEY}&language&#61;ko&page&#61;1&#96;; fetchMovie(endpoint); // 스크롤 이벤트 생성 window.addEventListener('scroll', scrollHandler, true); }, []); const scrollHandler &#61; (e) &#61;> { console.log(&#34;스크롤 이벤트&#34;); if( document.body.scrollHeight &#61;&#61; window.scrollY &#43; window.innerHeight ) { console.log(&#34;스크롤 맨아래 이벤트 발생&#34;); loadMoreItems(); } } const loadMoreItems &#61; () &#61;> { console.log(CurrentPage); // 몇번의 이벤트를 발생시켜도 CurretPage의 초기값이 변하지 않음. const endpoint &#61; &#96;${API_URL}movie/popular?api_key&#61;${API_KEY}&language&#61;ko&page&#61;${CurrentPage&#43;1}&#96;; fetchMovie(endpoint); // 새로운 영화정보 호출 //해당 함수에서 setCurrentPage(CurretPage&#43;1)를 발생 } 이런 소스에서 useEffect로 발생시킨 이벤트리스너 scrollHandler에서 loadMoverItems를 실행하고 거기서 CurrentPage useState를 가져오는데 이 값이 항상 초기값만 가져오게 됩니다.일반 자바스크립트 변수 let, var 와 useState가 어떤식으로 다른지 궁금합니다.검색을 해봤을때 주로 useState의 쓰임새에 대해서만 나올뿐, 라이프사이클이라던지, 변수랑 정확히 어떻게 다르고 어떨때 사용할 수 없는지에 대해 찾을수가 없었습니다.선배님들의 도움 부탁드립니다.

세브라이드 · Accepted Answer

useEffect는 블럭 안의 변수를 이펙트가 일어난 시점으로 전부 가둡니다. 그래서 어떤 변수가 변했을 경우 useEffect를 다시 갱신시키기 위해 deps 배열을 받는 거고요.useState가 다른게 아니라 useEffect가 다른거라고 해도 되겠지요.

세브라이드 · Answer

const [Movies, setMovies] &#61; useState([]); const [MainMovie, setMainMovie] &#61; useState(null); const [CurrentPage, setCurrentPage] &#61; useState(0); useEffect(() &#61;> { const endpoint &#61; &#96;${API_URL}movie/popular?api_key&#61;${API_KEY}&language&#61;ko&page&#61;1&#96;; fetchMovie(endpoint); // 스크롤 이벤트 생성 const ev &#61; window.addEventListener('scroll', (e) &#61;> { scrollHandler(CurrentPage); }, true); return () &#61;> { window.removeEventListener(ev); } }, [CurrentPage]); const scrollHandler &#61; (CurrentPage) &#61;> { console.log(&#34;스크롤 이벤트&#34;); if( document.body.scrollHeight &#61;&#61; window.scrollY &#43; window.innerHeight ) { console.log(&#34;스크롤 맨아래 이벤트 발생&#34;); loadMoreItems(CurrentPage); } } const loadMoreItems &#61; (CurrentPage) &#61;> { console.log(CurrentPage); // 몇번의 이벤트를 발생시켜도 CurretPage의 초기값이 변하지 않음. const endpoint &#61; &#96;${API_URL}movie/popular?api_key&#61;${API_KEY}&language&#61;ko&page&#61;${CurrentPage&#43;1}&#96;; fetchMovie(endpoint); // 새로운 영화정보 호출 //해당 함수에서 setCurrentPage(CurretPage&#43;1)를 발생 } 기억코딩이라 맞나 모르겠네요. useEffect는 사이드이펙트 처리기이고, 따라서 기왕 addEventListener를 호출할 거면 return으로 removeEventListener도 해주는게 좀 더 정석적인 사용법입니다.

한길루 · Answer

세브라이드네 도움 감사합니다. 검색하다가 해당내용에 대해 보기는 했는데 컴포넌트가 종료될때 이벤트를 제거 해주는 부분이라고 봤던거 같은데 맞는건가요??

bennp · Answer

혹시 저도 지금 hook 사용에서 조금 막혔는데 질문하나만 해도될까요??

한길루 · Answer

세브라이드아 그러면 useEffect가 블럭안에서 실행된 또는 참조한 함수들의 내부 변수까지 이펙트가 일어난 시점기준으로 반영한다고 이해하면 될까요??

세브라이드 · Answer

&#64;한길루아닙니다. useEffect(() &#61;> { // 사이드 이펙트를 일으킬 내용을 적는다const ev &#61; window.addEventListener('scroll', scrollByMouseCursor, true);return () &#61;> { // 다음 사이드 이펙트를 일으키기 전에 이전 사이드 이펙트를 정리해준다window.removeEventListener(ev);}}, [mouseCursorPointX, mouseCursorPointY]); // 어떤 변수에 따라 사이드 이펙트를 갱신해줄지 정한다. useEffect는 컴포넌트 안에서 useEffect 생명주기가 따로 돌아갑니다. 따라서 컴포넌트가 종료될 때'도' 이전 사이드 이펙트를 정리해주는 부분이 실행되지만 다음 사이드 이펙트가 일어날때도 이전 사이드 이펙트를 정리해주는 부분이 실행됩니다. 그래야 사이드 이펙트가 갱신될때마다 addEventListener가 무한대로 되는 문제를 해결할 수 있으니까요. 거의 그렇다고 보면 됩니다만 100% 맞는지는 확인해본 적 없습니다. 사실 아시다시피, 함수는 가급적이면 순수하게 짜는게 옳고 순수하게 짜다보면 외부의 변이가 함수에까지 영향을 미치는지 확인할 일은 별로 없어지기 때문에...

세브라이드 · Answer

&#64;bennp괜찮으시면 새로 질문글 올려주시면 보겠습니다~~

bennp · Answer

혹시 제가 쓴 질문글이 있는데 한번 봐주시면 감사하겠습니다!!!

리액트 hook useState 질문입니다.

8개의 답변

#hooks 목록