React-hook의 useEffect 이제는 제대로 이해하고 사용하자

사실 고백을 하자면, 4주 프로젝트를 진행하면서 useEffect에 대해서 잘 모르고 있었다. 클래스형 컴포넌트로 작성하던 2주 프로젝트에서 메소드를 바인딩해주고, 라이프사이클 메소드를 사용하는 것에 지쳐 리액트훅이 좋다고 한 말에 이끌려 무작정 리액트훅으로 코드를 작성했었다.

어느정도 클래스형 컴포넌트 작성의 불편함을 해소하긴 했지만, useEffect를 사용하면서 무한루프에 빠지거나, 렌더링 시점을 맞추지 못하는 등 문제가 많았다. 임시방편으로 데이터 패칭할 때 useEffect를 따로 분리해 사용하거나, 정확히 알지 못한채로 물새는 천장 구멍 막듯 작동가능한 상태로만 만들어두고 배포를 했었다.

현재, 리팩토링하기로 마음을 먹은 이상, 이대로 둘 순 없다 생각하여 Dan 님의 블로그 useEffect 완벽 가이드를 보며 제대로 이해하고 넘어가려고 한다.

심지어, 오늘 리팩토링하던 중에 잘만 되던 회원가입 인풋에 비밀번호 입력이 안되고 컴퓨터까지 느려지는 것 같은 이상한 버그가 발견되어서 보니, eslint의 지적대로 useEffect의 의존성 배열안에 state 값을 무심코 넣어줬던 게 state 값이 바뀔 때마다 setState를 해주게 되면서 무한루프에 빠지게 했던 것이었다!

해결 방법에 대해서 프로젝트 팀원이 간략히 설명을 해줘서, 이제는 더이상 늦춰선 안되겠다는 생각에 useEffect를 진짜로 파헤쳐보기로 한다.

으아악

공부중..