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

배경

올해 초 React 16.8이 정식 릴리즈되면서 Hooks가 안정화됐지만, 프로덕션 도입은 미뤄왔다. 6월부터 신규 기능 개발에 Hooks를 적용하기 시작했고, 이제 어느정도 익숙해진 시점이다.

useState의 함정

초기에 가장 많이 실수한 부분은 상태 업데이트 타이밍이었다.

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
  setCount(count + 1); // 예상: 2 증가, 실제: 1 증가
};

클로저 특성을 이해하지 못해 발생한 버그였다. 함수형 업데이트로 해결했다.

setCount(prev => prev + 1);
setCount(prev => prev + 1); // 정상 동작

useEffect 의존성 배열

ESLint 플러그인(eslint-plugin-react-hooks)을 설정하지 않았을 때 누락된 의존성 때문에 시간을 많이 썼다. 특히 props로 받은 함수를 의존성에 넣었을 때 무한 루프가 발생하는 경우가 있었다.

부모 컴포넌트에서 useCallback으로 함수를 메모이제이션하니 해결됐다.

Custom Hook의 유용함

API 호출 로직을 useFetch 훅으로 분리하니 코드 재사용성이 크게 개선됐다.

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

결론

클래스 컴포넌트 대비 로직 분리와 재사용이 확실히 편해졌다. 다만 팀원들의 학습 곡선이 있어서 코드 리뷰 시간은 늘어났다. 신규 프로젝트는 Hooks 위주로 진행하되, 기존 코드의 전면 리팩토링은 당분간 보류하기로 했다.