Builder.shin

React Hooks 도입 검토 중 고민했던 것들

배경

10월에 React Conf에서 발표된 Hooks가 곧 정식 릴리즈될 예정이다. 현재 프로젝트는 React 16.6을 사용 중이며, Class 컴포넌트와 HOC, Render Props 패턴이 혼재되어 있다.

현재 코드의 문제점

상태 로직 재사용을 위해 HOC를 중첩하다 보니 wrapper hell이 발생했다. Redux connect, withRouter, withAuth 등이 3~4단계로 감싸진 컴포넌트가 많았다.

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(
  withRouter(
    withAuth(MyComponent)
  )
);

lifecycle 메서드에 관련 없는 로직이 섞이는 것도 문제였다. componentDidMount에서 데이터 fetch, 이벤트 리스너 등록, 타이머 설정이 모두 들어가 있었다.

Hooks의 장점

  • useState, useEffect로 상태와 side effect를 함수형으로 처리
  • Custom Hook으로 로직 재사용이 깔끔해짐
  • Class의 this 바인딩 문제에서 해방

간단한 폼 컴포넌트를 Hooks로 작성해봤다.

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  const onChange = e => setValue(e.target.value);
  return { value, onChange };
}

function LoginForm() {
  const email = useInput('');
  const password = useInput('');
  
  return (
    <form>
      <input type="email" {...email} />
      <input type="password" {...password} />
    </form>
  );
}

Class 컴포넌트 대비 보일러플레이트가 확실히 줄어들었다.

도입 전략

  1. 신규 컴포넌트부터 Hooks 적용
  2. 기존 코드는 점진적으로 마이그레이션
  3. Class와 Hooks 혼용 가능하므로 급하게 전환하지 않기

16.8 정식 릴리즈 후 팀 내부 스터디를 진행하고 본격 도입할 예정이다. 아직 베스트 프랙티스가 정립되지 않은 시점이라 조심스럽지만, 방향성은 맞다고 판단했다.