프레임워크난이도 보통⏱ 컴포넌트 단위(점진적)

React 클래스 컴포넌트에서 훅으로 마이그레이션

클래스 컴포넌트→함수형 + 훅

요약: this.state는 useState로, 생명주기 메서드는 useEffect로, 인스턴스 변수·ref는 useRef로 옮깁니다. 컴포넌트 단위로 점진 전환할 수 있습니다.

왜 옮기나

class extends React.Component, this.state/setState, componentDidMount 등 생명주기.

함수형으로 골격 전환

class를 function 컴포넌트로 바꾸고 render의 반환부를 그대로 옮깁니다.

function MyComp(props) {
  // ...
  return <div>...</div>
}

state를 useState로

this.state 각 필드를 useState로 분리하고 this.setState 호출을 setter로 교체합니다.

const [count, setCount] = useState(0)
// this.setState({count: count+1}) → setCount(count + 1)

생명주기를 useEffect로

componentDidMount는 useEffect(fn, []), update는 의존성 배열, unmount는 cleanup 반환으로 표현합니다.

useEffect(() => {
  const id = subscribe()
  return () => unsubscribe(id) // componentWillUnmount
}, [])

ref·인스턴스 변수

createRef는 useRef로, 렌더 간 유지되는 인스턴스 변수도 useRef로 대체합니다.

const inputRef = useRef(null)

useEffect 의존성 배열을 빠뜨리면 stale closure(옛 값 참조) 버그가 납니다 — 린트 규칙(exhaustive-deps)을 켜세요.
setState 콜백(두 번째 인자) 패턴은 useEffect로 옮겨야 합니다.
getDerivedStateFromProps·shouldComponentUpdate는 useMemo/useEffect/React.memo로 재설계합니다.

✅ 검증: 전환 후 동작이 동일한지 확인하고, React DevTools로 불필요한 재렌더가 늘지 않았는지 점검합니다.

ReactHooks클래스컴포넌트useStateuseEffect