2021-12-06 : useState, useEffect, deps 에 관해

[som-syom]

리액트 코드를 짜는 도중에 useState 의 상태 변화 시기가 이상했다. useState 로 배열을 관리하는데, 배열 항목을 추가/삭제 하는 과정에 추가/삭제 각각 함수에서 test api 서버로 업데이트 된 배열 state 값을 patch 로 전달되도록 코드를 짰는데, 추가를 하면 화면상에는 추가되지만 test api 서버는 업데이트가 되지 않고 삭제 버튼을 누르면 그제서야 추가된 배열 state 값이 서버로 올라가는 현상이 일어났다.

처음에는 제때 상태가 업데이트 되지 않는다 생각하여 useEffect 의 deps 에 배열 state 를 넣었더니 안에 넣었던 console.log 가 무한대로 출력되었다. 계속해서 업데이트 되는게 이상하다 싶어서 useEffect 와 리렌더링에 관해 찾아보게 되었다.

문제는 사실 별거 아니였던게 useEffect 내 코드에 배열 state 값을 업데이트 하는 setState 가 들어가있어서 그랬다...

이전에 react-devtools 를 이용해서 리렌더링을 확인할 수 있었던거 같은데 v4 업데이트 되면서 사라졌다고 한다. 다운그레이드 방법이 있다고 하여서 따라해보았는데 다운그레이드한 확장프로그램을 키면 내 리액트 서버가 아예 로드 되지않아 적용이 안될거 같았다.

결국 상태는 원점이지만 리렌더링 방지 hooks들도 조금 공부하게 되고(React.memo 나 useCallback 같은 것들,,) useEffect 내에 state 업데이트 하는 훅을 넣어놓고 의존성배열(deps)에 해당 state 값을 넣으면 안된다는걸 깨달았다..

얼른 api 값이 업데이트 안되는 문제를 해결해봐야겠다

[som-syom]

https://yoonho-devlog.tistory.com/170 useState/setState 의 비동기에 관한 글

[som-syom]

useState 훅 사용시 비동기로 처리되고, 함수형 컴포넌트를 사용하면 setState 와 다르게 콜백을 사용할 수 없다고 한다. 위의 링크에선 조금 복잡한 방법으로 사용하였는데 나는 단순하게 이렇게 처리하기로 하였다... 문제가 생긴다면 다시 수정해봐야 할 듯.

그리고 useState 를 사용하면 보통 바로 리렌더가 되지 않는 경우가 있었는데, 이번 state 값은 배열이라 그런지 useEffect에 의존성배열에 넣지 않아도 바로바로 리렌더가 된다. 이 부분도 확인해보아야 할 듯