5관문. Previous Value Tracking

관문 5 / 7

usePrevious 커스텀 훅을 구현하여 이전 렌더의 상태값을 추적하라.

📖 이론 비급

Previous Value: 이전 렌더 값 기억하기

리액트에는 이전 상태값을 기억하는 내장 API가 없다. useRef를 활용하면 이전 렌더 값을 보존할 수 있다.

패턴: const ref = useRef(value); useEffect(() => { ref.current = value; }); 의존성 없는 Effect는 매 렌더 후 실행된다. Effect 실행 전까지 ref.current는 이전 렌더의 값을 유지한다.

⚔️ 수련 코드

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

// TODO: usePrevious 훅을 구현하라
function usePrevious(value) {
  // useRef와 useEffect를 활용하여 이전 값을 반환하라
}

export default function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

  return (
    <div>
      <p>현재: {count} | 이전: {prevCount ?? '없음'}</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  );
}

Open Sandbox