새로고침하여 페이지를 렌더링 했을 때, page 상태값이 초기값으로 설정한 1이 나오기를 기대했다.
<문제 파악>
그러나,
이렇게 2가 나오는 에러가 발생했다.
그런데, fetch 요청 시 URL 파라미터에 page를 넣어서 요청하는 로직으로 구성되어 있어 원하는 데이터를 요청하려면 이 page 상태값을 정확히 관리해주는 것이 필요했다.
문제 원인은 렌더링 되자마자 observer를 설정하고 실행한 useEffect 훅이 작동하는 것으로 확인되었다. 그래서 그 안의 콜백함수에 작성된 setPage 코드가 실행되어 page의 상태값이 2로 업데이트 된 것이다.
<문제 해결>
useEffect의 dependency array를 잘못 작성했었다.
저기서 page, target으로 설정해주니, setPage 코드가 돌아가면서 계속 page 상태가 변경되고, 이로 인해 useEffect가 연속적으로 실행되었던 것이다.
dependency array에 [] 빈 배열을 넣어주어, 처음 한 번만 작동되도록 수정해보았다.
페이지를 새로고침하자 page가 1, 즉 초기값으로 잘 나왔다.
그러나 또 다른 문제 발생...
<문제 파악>
setPage 가 동작하지 않는다.
div가 viewport에 관측되어 API 콜백 함수를 호출할 때마다, page 상태의 초기값만 찍히고 값이 업데이트 되지 않는 문제가 발생했다.
문제를 해결하기 위해서는 useEffect의 동작 방식을 더 정확히 파악할 필요가 있다고 느껴졌다.
https://www.rinae.dev/posts/a-complete-guide-to-useeffect-ko
[번역] useEffect 완벽 가이드
Dan Abramov의 'A Complete Guide to useEffect 번역'
www.rinae.dev
이 글을 참고하여 useEffect에 대해 파헤친 후, 다시 돌아와서 에러를 해결해보도록 하겠음!
<문제 해결>
위 글을 참고하여 코드를 다시 본 결과, 수정한 코드는 맞았는데 console.log(page)를 찍어주는 위치 문제였음.
dependency array가 빈 배열이기 때문에, 렌더링 시 이펙트는 업데이트 되지 않는다. 즉, 저 스코프 내에서 page 라는 상태는 항상 초기값이다. prevPage로 setPage를 호출해주기 때문에!
해당 useEffect 밖에서 page를 콘솔에 찍어보니, 원래 의도한 동작대로 div가 관측될 시에 딱 한번만 page 를 1씩 증가시켜주고 있었다!
<느낀 점>
useEffect가 리액트 런타임에서 어떠한 방식으로 작동하는지 시간이 오래 걸리더라도 차근차근 이해하는 것의 중요성을 크게 느꼈다.
리액트 런타임과 더 친해지자!
