useRef 사용법 정리

✔️ useRef가 필요한 상황

JavaScript를 사용할 때에 화면 상에서 특정 대상을 선택해야할 때가 있다. 이것을 특정 DOM을 선택한다고 얘기한다. 리액트가 아니라 Vanilla JavaScript를 쓸 때는 getElementById, querySelector 같은 selector 함수를 활용해서 선택한다.

 

리액트를 사용할 때에도 아주 드물게 DOM을 직접 선택해야하는 경우가 있다. focus를 선택해주거나 두 개 컴포넌트의 싱크를 맞출 때 (pagination 등) 필요하다. 그 때 ref를 사용하고, useRef는 ref를 설정해주는 역할을 한다.

 

 

✔️ 예시

useRef()를 통해서 inputSpace라는 ref 객체를 만들었고, 이 객체를 선택하고 싶은 <input/> 태그에 ref 값으로 넣어줬다. 이제 ref 객체의 .current 값은 우리가 원하는 <input /> 태그 DOM을 가리킨다.

function Sample() {

  const inputSpace = useRef();
  const onFocus = () => {
    inputSpace.current.focus();
  };

  return (
        <div>
          <input
            name="here"
            placeholder="여기에 focus 되도록"
            onChange={onChange}
            value={value}
            ref={inputSpace}
          />
          <button onClick={onFocus}>포커스</button>
        </div>
  );

}

 

 

✔️ useRef의 또다른 기능 : 변수관리

useRef Hook은 컴포넌트 안에서 어떤 변수를 관리할 수 있는 다른 기능이 있다. 

 

변수 관리는 useState Hook을 사용하면 될 거라고 생각하는데, useState Hook으로 변수를 상태값으로 관리하면 상태값이 바뀔 때마다 컴포넌트가 리렌더링 되는데, useRef으로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않는 것이 가장 큰 특징이다.

 

상태는 상태를 바꾸는 함수를 호출한 이후에, 렌더링 이후로 업데이트 된 상태를 조회할 수 있는데, useRef Hook으로 관리하고 있는 변수는 설정 후 바로 조회할 수 있다.

 

또한, useRef Hook으로 만들어진 변수는 React의 전역 저장소에 저장되기 때문에 함수를 다시 호출하더라도 마지막으로 업데이트한 current 값이 유지되는 장점이 있다.

이 기능이 유용하게 쓰이는 경우!
- setTimeout, setInterval 을 통해서 만들어진 id
- 외부 라이브러리를 사용하여 생성된 인스턴스
- scroll 위치

 

✔️ 예시

nextId라는 값을 수정할 때에도 .current 값을 수정하면 되고, 조회할 때에도 .current 값을 조회하면 된다

const nextId = useRef(4);
const onCreate = () => {
  // 나중에 구현 할 배열에 항목 추가하는 로직
  // ...
  nextId.current += 1;
};

 

✔️ 참고 자료

아래 블로그에 더욱 자세한 내용이 있습니다. 본 포스팅은 스스로의 이해를 돕기 위해 작성하였습니다 :) 

10. useRef 로 특정 DOM 선택하기 · GitBook