refs

// ❌ 렌더링 중에 ref 읽기
function Component() {
  const ref = useRef(0);
  const value = ref.current; // 렌더링 중에 읽지 마세요
  return <div>{value}</div>;
}

// ❌ 렌더링 중에 ref 수정
function Component({value}) {
  const ref = useRef(null);
  ref.current = value; // 렌더링 중에 수정하지 마세요
  return <div />;
}

// ✅ Effect/핸들러에서 ref 읽기
function Component() {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      console.log(ref.current.offsetWidth); // Effect에서는 OK
    }
  });

  return <div ref={ref} />;
}

// ✅ UI 값에는 state 사용
function Component() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

// ✅ ref 값의 지연 초기화
function Component() {
  const ref = useRef(null);

  // 첫 사용 시 한 번만 초기화
  if (ref.current === null) {
    ref.current = expensiveComputation(); // OK - 지연 초기화
  }

  const handleClick = () => {
    console.log(ref.current); // 초기화된 값 사용
  };

  return <button onClick={handleClick}>Click</button>;
}