React Hooks를 프로덕션에 도입하기 전 고민했던 것들

배경

React 16.8이 2월 초에 릴리즈되면서 Hooks가 정식 스펙으로 포함되었다. 작년 10월 발표 당시부터 관심은 있었지만, 프로덕션에 적용하기에는 시기상조라고 판단했었다. 이제 정식 릴리즈가 되었으니 실제 도입을 검토할 시점이 되었다.

기존 코드베이스 현황

현재 프로젝트는 약 200여개의 컴포넌트로 구성되어 있고, 대부분 Class 컴포넌트다. Redux를 상태관리로 사용 중이며, Higher-Order Components(HOC) 패턴이 많이 쓰이고 있다.

class UserProfile extends React.Component {
  state = {
    loading: false,
    data: null
  };

  componentDidMount() {
    this.fetchUserData();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.userId !== this.props.userId) {
      this.fetchUserData();
    }
  }

  fetchUserData = async () => {
    // 데이터 페칭 로직
  };
}

도입 전략

팀 회의에서 다음과 같이 결정했다.

1. 점진적 도입

기존 컴포넌트를 일괄 마이그레이션하지 않는다. 새로운 컴포넌트만 Hooks로 작성하고, 기존 코드는 리팩토링 필요성이 생길 때만 전환한다.

2. Custom Hook 우선 작성

반복되는 로직(데이터 페칭, 폼 처리 등)을 Custom Hook으로 먼저 분리한다. 이를 통해 팀원들이 Hooks 패턴에 익숙해지도록 한다.

function useUserData(userId) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetchUser(userId)
      .then(setData)
      .finally(() => setLoading(false));
  }, [userId]);

  return { data, loading };
}

3. 학습 시간 확보

2주간 사이드 프로젝트나 작은 기능에 Hooks를 적용해보는 시간을 가진다. 특히 useEffect의 의존성 배열 개념이 처음에는 헷갈릴 수 있어서 충분한 실습이 필요하다.

우려사항

• 러닝 커브: 특히 useEffect의 클린업 함수, 의존성 배열 관리가 직관적이지 않을 수 있다
• ESLint 설정: eslint-plugin-react-hooks 도입 필요
• 테스트 코드: Enzyme이 Hooks를 완전히 지원하지 않아 React Testing Library로의 전환도 고려 중

다음 단계

3월부터 신규 기능 개발에 Hooks를 적용해볼 예정이다. 특히 반복적으로 사용되는 API 호출, 폼 검증 로직을 Custom Hook으로 추상화하는 작업부터 시작한다.