[TIL] useRef

useRef

useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook이다.

const ref = useRef(initialValue)

• 매개변수

  • initialValue: ref 객체의 current프로퍼티 초기 설정값이다. 여기에는 어떤 유형의 값이든 지정할 수 있다. 이 인자는 초기 렌더링 이후부터는 무시된다.

• 반환값

  • useRef는 단일 프로퍼티를 가진 객체를 반환한다:

current: 처음에는 전달한 initialValue로 설정된다. 나중에 다른 값으로 바꿀 수 있다. ref 객체를 JSX 노드의 ref어트리뷰트로 React에 전달하면 React는 current프로퍼티를 설정한다.
다음 렌더링에서 useRef는 동일한 객체를 반환한다.

ref로 DOM 조작하기

ref를 사용하면 DOM을 조작할 수 있다. React에서는 이를 기본적으로 지원한다.
먼저 ref객체를 선언하고

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);
  // ...

그 다음 ref객체를 조작하려는 DOM노드에 전달한다.

// ...
  return <input ref={inputRef} />;

React가 DOM 노드를 생성하고 화면에 그린 후, React는 ref 객체의 current프로퍼티를 DOM 노드로 설정한다. 이제 DOM 노드 접근해 focus()와 같은 메서드를 호출할 수 있다.

  function handleClick() {
    inputRef.current.focus();
  }

노드가 제거되면 React는 current를 다시 null로 설정한다.