React useRef는 언제 사용할까

React useRef는 언제 사용할까에서 먼저 볼 부분

useRef는 DOM 요소를 직접 가리키거나 렌더링을 일으키지 않는 값을 보관할 때 사용합니다. state와 목적을 구분하는 것이 중요합니다.

useState는 값이 바뀌면 화면을 다시 그리지만, useRef는 값이 바뀌어도 렌더링을 일으키지 않습니다. 그래서 화면에 직접 보여줄 값이라면 state가 맞고, 내부적으로만 기억할 값이라면 ref가 어울립니다.

가장 흔한 사용 예는 DOM 요소 접근입니다. 입력창에 포커스를 주거나 특정 영역의 크기를 읽거나 스크롤 위치를 제어할 때 ref를 사용할 수 있습니다.

ref.current에는 현재 참조 대상이 들어갑니다. 처음 렌더링 전에는 null일 수 있으므로 바로 접근하기보다 이벤트나 effect 안에서 안전하게 확인하는 습관이 필요합니다.

모든 값을 ref로 관리하면 React의 데이터 흐름이 흐려질 수 있습니다. 사용자가 보는 화면 상태는 state, 화면과 무관한 내부 참조는 ref라는 기준으로 나누면 좋습니다.

입력창에 포커스 주기

function SearchBox() {
  const inputRef = React.useRef(null);

  return (
    <div>
      <input ref={inputRef} placeholder="검색어">
      <button onClick={() => inputRef.current.focus()}>입력창 선택</button>
    </div>
  );
}

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

React useRef는 언제 사용할까 비교 기준

잘못 작성했을 때 나타나는 흐름

React 글은 화면 조각, 데이터 흐름, 상태 변경 시점을 나누어 읽으면 헷갈림이 줄어듭니다.

값이 부모에서 내려오는지, 컴포넌트 내부에서 바뀌는지 구분하면 props와 state 관련 오류를 훨씬 빨리 찾을 수 있습니다.

작은 예제라도 렌더링 전후에 화면이 왜 바뀌는지 설명할 수 있어야 다음 단계의 Hook을 이해하기 쉽습니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• 화면에 보여야 하는 값인지 확인하기
• DOM 요소 접근이 필요한지 확인하기
• ref.current가 null일 수 있음을 고려하기
• state 대신 ref를 남용하지 않기