useRef 로 Dom 선택하기

벨로퍼트 모던 리액트 내용을 일부 정리했습니다. (리액트 입문자라면 이 사이트 튜토리얼로 학습해보세요. 매우 좋습니다.)

JavaScript 에서 특정 DOM 을 선택해 (getElementById, querySelector) 조작하는 것처럼 리액트에서도 DOM 을 선택해 특정 엘리먼트 크기나 스크롤바 위치를 가져오거나 포커스를 설정해야 하는 사용하는 경우가 있습니다. 이때 리액트는 ref 를 쓰는 데, 함수형 컴포넌트에서는 useRef 라는 Hook 으로 ref 를 사용합니다.

아래 예시는 input 창을 입력한 후 초기화 버튼을 눌렀을 때 포커스가 다시 input 창으로 이동하는 코드를 간락히 적은 것입니다. useRef 로 생성한 Ref 객체를 선택하고 싶은 DOM 에 ref 값으로 설정해주고 객체의 .current 값으로 해당 DOM 을 가르킵니다.

import React, { useRef } from 'react';

const InputSample = () => {
  ..  
  const nameInput = useRef(); // Ref 객체 생성
  ..
  const onReset = () => {
    nameInput.current.focus(); // nameInput 으로 설정된 ref 값의 current 로 포커스 이동
  };
  return (
    <div>
      <input
        ref={nameInput} // ref 지정
      />
      <button onClick={onReset}>초기화</button> // 버튼 클릭시 함수 싱행
      <div>
        <b>값: </b>
        {name}({nickname})
      </div>
    </div>
  );
};
export default InputSample;

useRef 로 DOM 에 접근하는 방법 외에 다른 주요 특성도 있는데, 리액트 공식문서에는 아래와 같이 나와있습니다. (추가 공부 필요)

리액트 공식문서

• ref 속성 보다 useRef() 가 더 유용하다. 어떤 가변값을 유지하는 데 더 편리하다.
• useRef() 는 순수 자바스크립트 객체를 생성한다.
• useRef() 와 {current: ...} 의 차이는 useRef 는 매번 렌더링할 때 동일한 ref 객체를 제공한다는 것
• useRef 는 내용이 변경될 때 그것을 알려주지 않는다.
• .current 프로퍼티를 변형하는 것이 리렌더링을 발생시키지 않는다.