React Hooks 도입 전 고민했던 것들

배경

작년 10월 React Conf에서 발표된 Hooks가 드디어 16.8 정식 버전에 포함되었다. 그동안 여러 토이 프로젝트로 테스트해봤고, 이제 실제 프로덕션 코드에 적용할지 결정해야 하는 시점이 왔다.

현재 프로젝트는 약 200개의 컴포넌트가 있고, 그 중 70% 정도가 Class 컴포넌트다. HOC와 render props 패턴도 많이 사용하고 있어서 코드 추적이 쉽지 않은 상태였다.

주요 고민 사항

1. 전면 마이그레이션 vs 점진적 도입

기존 코드를 모두 바꾸는 건 현실적이지 않았다. React 팀도 Class 컴포넌트를 제거할 계획이 없다고 명시했으니, 새로운 기능부터 Hooks로 작성하기로 했다.

2. Custom Hooks로 로직 분리

기존에 여러 컴포넌트에서 중복되던 상태 관리 로직을 Custom Hook으로 추출할 수 있었다.

// Before: HOC 패턴
const withAuth = (Component) => {
  return class extends React.Component {
    state = { user: null };
    componentDidMount() {
      this.fetchUser();
    }
    // ...
  };
};

// After: Custom Hook
function useAuth() {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser().then(setUser);
  }, []);
  
  return user;
}

3. useEffect 의존성 배열

componentDidMount, componentDidUpdate를 하나로 통합하는 건 편하지만, 의존성 배열 관리가 생각보다 까다로웠다. eslint-plugin-react-hooks를 설치해서 lint 단계에서 체크하도록 설정했다.

결정

• 신규 컴포넌트는 모두 Function Component + Hooks로 작성
• 기존 코드는 리팩토링 필요시에만 변경
• 공통 로직은 Custom Hook으로 추출
• 팀 내 코드 리뷰 시 Hooks 사용법 공유

아직 팀원들이 모두 익숙하지 않아서 Learning Curve는 있겠지만, 장기적으로는 코드 가독성과 재사용성이 개선될 것으로 기대한다.