리액트 Hooks : useRef

useRef, 언제 사용할까?

useRef는 크게 DOM 요소에 접근하는 경우, 렌더링을 일으키지 않고 값을 변경시키는 두 가지 경우에 사용합니다.

Vanilla JavaScript로 특정 DOM 요소에 접근하고자 하는 경우에는 getElementById 혹은
querySelector 같은 함수를 사용하였는데요. 리액트에서는 useRef라는 Hook를 사용하거나,
콜백 함수 혹은 React.createRef(클래스형 컴포넌트) 라는 함수를 사용합니다.

useRef 사용법

import { useRef } from "react";

useRef를 사용하기 위해서는 가장 먼저 react에서 useRef를 import 받아야 합니다.

기본 형태는 아래와 같습니다.

//Ref 객체 생성
const ref = useRef();
 
//current -> DOM 가리킴. 아래의 경우는 <input /> 태그 DOM을 가리킨다.
nameInput.current.focus();
 
//접근하고 싶은 태그에는 ref 속성을 준다.
<input
  name="lime"
  placeholder="focus!!"
  onChange={onChange}
  value={value}
  ref={nameInput}
/>;

예시

function Sample() {
  const nameInput = useRef();
 
  //포커스 잡기
  const onFocus = () => {
    nameInput.current.focus();
  };
 
  return (
    <div>
      <input
        name="lime"
        placeholder="focus!!"
        onChange={onChange}
        value={value}
        ref={nameInput}
      />
      <button onClick={onFocus}>포커스</button>
    </div>
  );
}

위 예시는 useRef를 사용하여 포커스 버튼을 눌렀을 때 해당 input에 포커스가 잡히도록 한 것입니다.

변수 관리

useState를 사용하여 변수를 상태값으로 관리하게 되면 값이 바뀔 때 마다 컴포넌트가 렌더링 되는데, useRef를 사용하여 변수를 관리한다면 컴포넌트가 리렌더링 되지 않습니다. 또한 상태로 관리하는 경우에는 상태를 바꾸는 함수를 호출한 다음 렌더링 하고 나서 업데이트 된 상태를 조회할 수 있는데, useRef를 사용하는 경우에는 설정 후 바로 조회하는 것이 가능합니다. 더불어 useRef로 만들어진 변수는 React의 전역 저장소에 저장되기 때문에 함수를 다시 호출하더라도 마지막으로 업데이트한 current 값이 유지됩니다.

const nextId = useRef(3);
const onCreate = () => {
  nextId.current += 1;
};

해당 기능이 유용하게 사용되는 경우

• setTimeout, setInterval을 통해 만들어진 id
• scroll 위치
• 외부 라이브러리를 사용하여 생성된 인스턴스

Today I Learned

참고사이트