useRef vs useState 혼동

입력 필드의 글자 수가 실시간으로 화면에 반영되지 않습니다. 버그를 찾으세요:

JSX

function CharCounter() {
  const countRef = useRef(0);

  const handleChange = (e) => {
    countRef.current = e.target.value.length;
  };

  return (
    <div>
      <input onChange={handleChange} />
      <p>글자 수: {countRef.current}</p>
    </div>
  );
}

답변

useRef에 숫자를 저장하면 안 됨 onChange가 input 태그에서 작동하지 않음 useRef 값 변경은 리렌더링을 트리거하지 않아 화면이 갱신되지 않음 countRef.current를 JSX에서 직접 읽을 수 없음

로그인 후 제출하기