React Hooks 알파 — 리팩터링 계획

React Conf에서 Hooks 공개됐다. 16.7 alpha에 들어있음. 일단 사이드 프로젝트에 붙여봤는데, 이게 class 문법 없이 상태 가진 컴포넌트를 만드는 거라 코드 모양이 확 바뀐다.

import React, { useState, useEffect } from 'react';

function Counter() {
  const [n, setN] = useState(0);
  useEffect(() => {
    document.title = `count ${n}`;
  }, [n]);
  return (
    <button onClick={() => setN(n + 1)}>+{n}</button>
  );
}

이거 실화냐... lifecycle 뭘로 쪼개서 썼나 싶었던 코드들이 다 정리됨. componentDidMount + componentDidUpdate로 중복 써야 했던 fetch 로직이 useEffect 하나로 합쳐지는 게 크다.

리팩터 계획 메모:

• 순수하게 상태/effect만 쓰는 함수 컴포넌트는 언제든 hooks로. 빠르게 전환 가능
• HOC로 감싸던 withAuth, withTheme → custom hook(useAuth, useTheme)으로 교체 검토
• class 컴포넌트에서 라이프사이클 복잡하게 얽힌 것(ex. resize + subscription + timer)은 단계별로
• redux connect 쓰는 건 일단 놔두기. react-redux 쪽 hooks 버전 기다림

아직 alpha라 prod 투입은 당연히 안 함. 근데 API 자체는 거의 확정된 느낌이라 지금 써봐도 학습 가치가 있다. 내년 초엔 stable 올 듯.