useRef는 어디에 쓰이나

1. 특정 DOM에 접근

특정한 DOM에 접근하기 위해서 사용을 한다. javascript로는 querySelector 같은 느낌이다.

내가 사용했던 예시로 들자면, 탑버튼을 만들때 사용했다.

어느 위치에는 탑 버튼을 누르면 항상 지정해놓은 위치로 갈 수 있도록 만들때 항상 지정해놓은 위치를 useRef로 지정해놓았었다.

 const topLocation = useRef(null);
 
 const onTop = () => {
    topLocation.current.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
    });
  };

<div ref={topLocation} className="top으로 가는 위치 지정" />

중간 부분은 다 빼먹고 사용했던 부분만 발췌하면 이런식으로 쓸 수 있다.

 

---

 

2. 불필요한 리렌더링을 막기 위해서 사용

input의 onChange event의 값을 state로 받으면 렌더링이 여러번 발생한다.

그러나 그 인풋을 ref로 지정하고 state를 버튼 클릭 시 ref의 current.value값으로 변경하면 딱 한번의 state변경이 일어난다.

보톤의 변수들은 리렌더링을 하면 초기화가 되지만 useRef로 관리되는 값들은 렌더링은 되지 않지만 초기화가 되지 않는다는 점을 가지고 사용할 수 있다.

 

사용예시)

useRef는 초기값을 객체로 저장하기 때문에 value값을 가지고 오려면 .current를 붙여줘야한다. 히힛

import {useRef} from "react";

const userId = useRef("");
console.log(userId.current);

 

useState는 state가 변경되면 내부의 모든 변수들이 초기화 되는 반면에, useRef 컴포넌트가 리렌더링 되지않는다.

즉, 값을 가지고 있지만 렌더링이 되지않을 뿐이다.

  const onChange = (e) => {
    inputRef.current = e.target.value;
    console.log(inputRef.current);
  };

이렇게 값을 한번에 onChange로 가지고 있다가 한번에 입력값을 보낼 수 있기 때문에 불필요한 리렌더링을 줄일 수 있다.

 

나의 경우 디바운스를 통해서 onchange에 대한 불필요한 리렌더링을 줄일려고했지만 lodash라이브러리를 깔아야하기때문에 프로젝트의 무게를 줄이고 싶은 사람이라면 이 방법이 최적인것같다.

나도 나중에 한번 써봐야지😎