[React] useRef의 사용 예시

리액트 훅 중의 useRef 훅은 DOM에 접근할 수 있도록 해주거나, 값을 저장해서 사용할 수 있는 훅이다.

(이때 저장한 값은 컴포넌트의 렌더링과 무관하게 유지된다!)

아직까지 useRef를 input 태그를 포커싱할 때 사용했던 경우가 대부분이었는데, 다른 예시가 더 있는지 추가적으로 정리해보려고 한다.

포커싱 하기

버튼을 클릭하거나, 이벤트 핸들러의 input 요소 등에 포커싱을 할 수 있다.

  {isLoggedIn && (
        <Icons>
          {showSearchInput && (
            <SearchInput
              inputRef={searchInputRef}
              setShowSearchInput={setShowSearchInput}
            />
          )}
          <SearchIcon onClick={() => setShowSearchInput(true)} />
        ...
        </Icons>
      )}

 

프로젝트에서는 외부영역을 클릭했을 때를 판단에서 검색창이 닫히도록 사용한 적도 있다.

 // 검색창 외부 클릭 여부 판단
  const clickOutside = (e: any) => {
    if (
      searchInputRef.current &&
      !searchInputRef.current.contains(e.target as Node)
    ) {
      setShowSearchInput(false);
    }
  };

 

 

값 저장하기

useRef에 값을 저장해서 이전 값, 현재 값을 비교할 때 사용할 수 있다.
.current 라는 프로퍼티로 값에 접근하거나 변경할 수 있다.

...
 const [count, setCount] = useState(0);
  const prevCountRef = useRef();
  useEffect(() => {
    prevCountRef.current = count;
  });
  const prevCount = prevCountRef.current;
  return (
    <>
      <h1>Now: {count}, before: {prevCount}</h1>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
    </>
  );

 

 

외부 라이브러리와 상호작용하기

useRef에 외부 라이브러리의 인스턴스를 저장해서 사용할 수 있다..!

useRefdㅔ 저장된 값은 리렌더링의 영향을 받지 않기 때문에 하나의 인스턴스를 계속 사용할 수 있다는 점에서 효율적일 것 같다는 생각.

 const mapContainerRef = useRef(null);
  const mapRef = useRef(null);

  useEffect(() => {
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [0, 0],
      zoom: 2,
    });
    mapRef.current = map;
    return () => map.remove();
  }, []);

  return <div ref={mapContainerRef} style={{ height: '400px' }} />;

 

 

출처

https://itprogramming119.tistory.com/entry/React-useRef-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C