React Hooks 프로젝트 도입 후 3개월 회고

배경

올해 2월 React 16.8이 정식 릴리즈되면서 Hooks가 안정화되었다. 팀 내에서 논의 끝에 4월부터 신규 컴포넌트는 Hooks로 작성하고, 기존 코드는 점진적으로 마이그레이션하기로 결정했다.

초기 적응 과정

처음에는 useState와 useEffect만 사용했다. 클래스 컴포넌트의 라이프사이클에 익숙했던 터라 useEffect의 dependency array 개념이 헷갈렸다.

// 초기에 자주 하던 실수
useEffect(() => {
  fetchData(userId);
}, []); // userId 변경 시 업데이트 안 됨

// 수정 후
useEffect(() => {
  fetchData(userId);
}, [userId]);

실제로 개선된 점

1. HOC 지옥 탈출: withAuth, withLoading 같은 HOC를 useAuth, useLoading 커스텀 훅으로 교체하니 코드 가독성이 크게 향상되었다.

2. 로직 재사용: 여러 컴포넌트에서 쓰던 폼 validation 로직을 useFormValidation 훅으로 분리했다. 100줄 넘던 중복 코드가 사라졌다.

3. 테스트 용이성: 순수 함수 형태의 커스텀 훅은 react-hooks-testing-library로 단위 테스트 작성이 훨씬 수월했다.

주의할 점

• useEffect 클린업을 빼먹어 메모리 누수가 발생한 케이스가 몇 번 있었다. 특히 setTimeout, 이벤트 리스너 등록 시 항상 클린업 함수를 작성하는 습관이 필요하다.
• ESLint의 exhaustive-deps 규칙을 켜두는 게 필수다. dependency 누락으로 인한 버그를 여러 번 방지했다.

결론

아직 useReducer, useMemo 등 고급 훅은 활용도가 낮지만, 기본적인 Hooks만으로도 코드 품질이 많이 개선되었다. 남은 클래스 컴포넌트도 연말까지는 대부분 마이그레이션할 계획이다.