Class Component에서 Hooks로 마이그레이션 준비

배경

작년 10월 React Conf에서 발표된 Hooks가 드디어 16.8 정식 버전에 포함되었다. 팀 내에서 도입 여부를 논의하면서, 기존 Class Component 기반 코드베이스를 어떻게 가져갈지 방향을 정리했다.

현재 상황

프로젝트는 약 200여 개의 컴포넌트로 구성되어 있고, 대부분 Class Component다. HOC(Higher-Order Component)와 Render Props 패턴을 혼용하고 있어 로직 재사용이 복잡한 편이다.

class UserProfile extends React.Component {
  state = {
    loading: true,
    user: null
  };

  componentDidMount() {
    this.fetchUser();
  }

  fetchUser = async () => {
    const user = await api.getUser(this.props.userId);
    this.setState({ user, loading: false });
  };

  render() {
    // ...
  }
}

Hooks 도입 계획

전면 리팩토링은 리스크가 크다고 판단했다. 다음과 같이 단계적으로 진행하기로 했다.

1. 신규 컴포넌트는 Hooks 우선 - 작은 UI 컴포넌트부터 시작
2. 기존 코드는 유지 - 동작하는 코드를 굳이 바꾸지 않음
3. Custom Hook 패턴 연구 - 공통 로직 분리에 활용

// 새로 작성하는 컴포넌트 예시
function UserProfile({ userId }) {
  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState(null);

  useEffect(() => {
    api.getUser(userId).then(data => {
      setUser(data);
      setLoading(false);
    });
  }, [userId]);

  // ...
}

우려사항

팀원들이 아직 Hooks에 익숙하지 않다. 특히 useEffect의 의존성 배열 개념이 헷갈린다는 피드백이 많았다. 당분간은 코드 리뷰를 강화하고, 간단한 컴포넌트로 경험을 쌓는 게 우선이다.

정리

Hooks는 분명 매력적이지만, 서두를 필요는 없다. 기존 Class Component도 여전히 지원되고, 점진적 도입이 공식 권장사항이다. 올해 상반기는 학습 기간으로 잡고, 하반기부터 본격적으로 적용해볼 계획이다.