[React] 리액트의 useRef 훅에 대한 정리

 

 

 

useRef 훅이란?

jsx로 작성 된 DOM이나 엘리먼트에 직접적으로 접근하기 위해 리액트에서 제공하는 훅 중 하나

javascript의 querySelector나 getElementById와 같은 기능을 제공한다.

 

 

일반적인 React의 데이터 플로우에서 props 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단입니다. 자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링해야 합니다. 그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우도 가끔씩 있습니다. 수정할 자식은 React 컴포넌트의 인스턴스일 수도 있고, DOM 엘리먼트일 수도 있습니다. React는 두 경우 모두를 위한 해결책을 제공합니다. -- react 공식문서

 

useRef 사용방법

 

샘플코드

import { React, useRef } from "react";

export const RefsComponent = () => {
  const myRef = useRef();
  const check = () => {
    console.log(myRef);
  };
  return (
    <>
      <button onClick={check} ref={myRef}>
        ref테스트
      </button>
    </>
  );
};

 

 

결과

 

 

위 코드에서 작성한 버튼을 클릭하면 위와 같은 결과가 나온다.

우리가 기존에 사용하던 선택자와 같이 해당 엘리먼트를 담고 있다...

 

 

어떤 경우에 useRef를 사용하면 좋을까?

useRef vs useState

 

 

React 공식문서에서는 useRef를 남용하지 말라고 적혀있다.

반드시 사용해야 하는 경우에 사용하라는 것인데, 해당 경우를 다음과 같이 이야기 하고 있다.

 

엘리먼트에 직접 접근하여 DOM을 조작해야 할 때... 아래와 같은 경우에 하라고 한다.

 

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
• 애니메이션을 직접적으로 실행시킬 때.
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

애초에 리액트 자체가, state가 변경될 때, 리랜더링을 통해 UI가 변경되도록 설계 되었기 때문에

직접 DOM을 조작하는 것을 지양하라는 것 같다..

 

그외에도 useRef는 값이 변경 된다해도 리랜더링과는 전혀 무관하기 때문에, 각 컴포넌트에서

사용하기 위해 데이터를 저장하기 위한 용도로 쓸 수도 있을 거 같다..

 

컴포넌트 안에 선언한 로컬변수는 state의 값이 변경될때마다 컴포넌트가 리랜더링 되기 때문에

초기화 되서 그닥 의미가 없을 거 같다.. 그렇다고 전역변수로 빼면 각 컴포넌트가 해당 변수를

공유하기 때문에 그것도 그닥....