React Hook 지옥으로부터 벗어나기

리액트에서 Hook을 사용하다보면 알 수 없이 코드가 복잡해지고 점점 건드리기 무서워지기 마련입니다. 그건 아마 부수효과와 관리해야 하는 Hook이 많아져서 그런게 아닐까 막연하게 생각하곤 하는데요, 이번에 소개해드릴 글은 Hook을 어떻게 관리하면 좋을지 제안 하는 글입니다.

useEffect

"useEffect는 라이프사이클 Hook이 아니다"라는 말로 시작합니다. 예를 들어, 특정 상황(API server, strict development mode 등)에서 기대하지 않은 호출이 발생할 수 있습니다. 그리고 많은 useEffect의 사용은 가독성을 떨어뜨리고 유지하기 어렵게 만들며 테스트하기 어렵게 합니다.

useMemo

useMemo를 써야하는 곳이 아님에도 쓰는 건 '섣부른 최적화'라고 말합니다. useMemo를 남용하는건 메모리 이슈와 의존성을 신경쓰지 못해 발생하는 문제 등이 발생할 가능성을 높입니다.

useState

useState를 많이 사용하는건 한 함수에서 변수를 여럿 사용하는 것과 마찬가지로 가독성을 해치고 관리하기 어렵게 만듭니다.

이밖에도 useReducer, useContext, Hook 내부에 비즈니스 로직 등 좋은 내용이 많습니다. 이번에도 긴 글은 아니니 한 번 읽어보시는 걸 추천합니다 ! :)