1관문. Instance Variables

관문 1 / 7

setInterval ID를 ref에 저장하고 cleanup에서 안전하게 정리하는 타이머를 구현하라.

📖 이론 비급

Instance Variables: 리렌더 없는 가변 저장소

타이머 ID, WebSocket 인스턴스, 외부 라이브러리 인스턴스 등 렌더링에 영향을 주지 않지만 컴포넌트 생애주기 동안 유지해야 하는 값들은 useRef에 저장한다.

const timerRef = useRef(null); timerRef.current = setInterval(...) 값 변경이 리렌더를 유발하지 않으므로 렌더링 성능에 영향이 없다.

⚔️ 수련 코드

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

export default function Stopwatch() {
  const [time, setTime] = useState(0);
  const [running, setRunning] = useState(false);
  // TODO: intervalRef를 useRef로 선언하라

  useEffect(() => {
    if (running) {
      // TODO: setInterval을 intervalRef.current에 저장하라
      setInterval(() => setTime(t => t + 1), 1000);
    }
    return () => {
      // TODO: clearInterval로 정리하라
    };
  }, [running]);

  return (
    <div>
      <p>{time}초</p>
      <button onClick={() => setRunning(r => !r)}>
        {running ? '정지' : '시작'}
      </button>
    </div>
  );
}

Open Sandbox