Builder.shin

React Hooks 도입 전 고민했던 것들

배경

지난주 React 16.8이 정식 릴리즈되면서 Hooks가 stable 버전으로 공개되었다. 작년 React Conf에서 발표를 보고 관심은 있었지만, 실제 프로덕션 도입은 신중하게 접근해야 할 것 같았다.

현재 우리 프로젝트는 약 200개의 컴포넌트가 있고, 대부분 클래스 컴포넌트로 작성되어 있다. HOC와 render props 패턴도 곳곳에 사용 중이다.

검토한 부분

1. 기존 코드와의 호환성

Hooks는 기존 클래스 컴포넌트와 완전히 호환된다. 점진적 도입이 가능하다는 점이 가장 큰 장점이었다.

// 기존 클래스 컴포넌트는 그대로 유지
class UserProfile extends React.Component {
  // ...
}

// 새 컴포넌트만 Hooks로 작성
function UserList() {
  const [users, setUsers] = useState([]);
  // ...
}

2. 로직 재사용성 개선

현재 HOC로 구현된 인증 로직이 꽤 복잡했다. withAuth, withPermission 같은 HOC를 중첩해서 사용하다 보니 props drilling도 심했다.

Custom Hook으로 리팩토링하면 더 간결해질 것 같았다.

function useAuth() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    // 인증 로직
  }, []);
  
  return { user, loading };
}

3. 팀 학습 곡선

팀원들이 이미 클래스 컴포넌트에 익숙하다. Hooks의 규칙(최상위에서만 호출, 조건문 안에서 사용 금지 등)을 제대로 이해하지 못하면 버그가 발생할 수 있다.

eslint-plugin-react-hooks를 활용하면 이런 실수를 사전에 방지할 수 있을 것 같다.

결정

당장 전체 마이그레이션은 하지 않기로 했다. 대신:

  1. 새로 작성하는 컴포넌트는 Hooks 사용
  2. 간단한 컴포넌트부터 리팩토링 시도
  3. 2주 후 팀 회고에서 경험 공유

점진적으로 도입하면서 실제 생산성 변화를 측정해볼 예정이다.

React Hooks 도입 전 고민했던 것들