[React] useRef Hook에 대해 알아보자

useRef Hook은 저장공간(변수 관리), DOM 요소 접근을 위해 사용되는 리액트 훅이다. 여기서 Ref는 'Reference'의 약자로, 참조라는 의미를 가지고 있다.

 

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. (출처 : React 공식 홈페이지)

 

1) 저장공간(변수 관리)

컴포넌트 내에서 변수를 관리한다고 하면 이전에 배운 state를 떠올려볼 수 있다.

 

함수형 컴포넌트에서 state를 관리하고 수정할 때 useState Hook을 사용하고, state가 변경될 때마다 컴포넌트가 다시 렌더링되는데 함수형 컴포넌트에서 다시 렌더링 된다는 것은 함수 자체가 다시 호출된다는 의미이므로 컴포넌트 내부의 변수들이 초기화된다. 

 

컴포넌트 내부 변수들이 초기화 된다는 것은 해당 컴포넌트 함수의 변수들이 모두 초기화되고 모든 함수 로직들이 다시 실행된다는 것을 의미한다.

 

이렇게 원치않는 렌더링으로 인해 곤란한 상황을 겪는 경우가 많은데, 이때 useRef Hook을 사용할 수 있다.

 

Ref의 유용한 점은 Ref 안에 있는 값을 아무리 변경하더라도 컴포넌트가 다시 렌더링되지 않는다는 것이다. ⭐️

즉, State 대신에 Ref 안에 값을 저장한다면 불필요한 렌더링을 막을 수 있다 !

 

또한 아무리 컴포넌트가 많이 렌더링 되어도 Ref 안에 저장되어 있는 값은 변경되지 않고 그대로 유지된다. 이것이 바로 리액트 공식문서에서 이야기하는 '반환된 Ref 객체는 전 생애주기를 통해 유지된다'의 의미이다.

 

그렇기 때문에 변경 시 렌더링이 발생하지 않도록 하거나, 다시 렌더링된다고 하더라도 유지되어야 하는 값을 관리할 때 유용하다 😎

 

정리 : 
state의 변화 👉🏻 리렌더링 👉🏻 컴포넌트 내부 변수들 초기화
Ref의 변화 👉🏻 리렌더링 X 👉🏻 Ref 값 유지
state의 변화 👉🏻 리렌더링 👉🏻 Ref 값 유지

 

2) DOM 요소 접근

Javascript 를 사용할때, 특정 DOM 을 선택하여 정보를 얻거나 임의로 조작해야 할때, getElementById 혹은 querySelector 과 같은 DOM Selector 함수를 사용하여 DOM 을 선택하였다. 하지만, React 는 이 기능을 대체할 수 있는 useRef 훅을 제공한다. 

 

useRef란 원하는 특정 DOM을 직접 선택해서 컨트롤 할 수 있게 해주는 Hook이다.

예를 들면 엘리먼트의 크기를 가져오거나 스타일 변경, 포커스 등의 작업을 해야할 때 useRef를 사용하면 된다.

 

대표적으로는 input 요소를 클릭하지 않아도 focus()를 주고 싶을 때 많이 사용되는데, 예를 들어 로그인 페이지에서 아이디 입력창을 클릭하지 않고도 자동적으로 focus 되도록 할 수 있다.

👉🏻 바닐라 JS의 document.querySelector(), getElementById() 등과 비슷한 역할을 수행

 

왜 기존에 Vanilla JS에서 사용하던 방식을 지양하고 useRef를 사용해야 할까? 🤔

React에서 querySelector 를 사용하게되면, 실제 DOM의 요소를 가져오게 된다. 하지만 React는 Virtual DOM을 통해 Real DOM을 그리기 때문에, React가 제어하고있는 Virtual DOM 안에 있는 요소가 더 신뢰할만하다.

 

DOM API로 Real DOM에 있는 node 를 담았지만, 이게 현재 Virtual DOM을 통해 Real DOM에 존재하는 node 인지 아닌지 확신할 수 없기 때문이다.

 

또한, React를 사용하게되면, 가장 중요한 개념 중 하나가 State 이다. React 내부에서 데이터는 컴포넌트 내의 State으로 조작된다. 즉, React가 State를 컨트롤(제어)하고 있다.

 

만약 이러한 React 시스템을 벗어나 DOM을 직접적으로 건드리게되면 이 내용들은 React가 제어하는 영역에서 벗어나게 되고, 이렇게 React의 제어를 벗어나게 되면, React에서 제공하는 이점들을 사용할 수 없게 된다.

 

3) useRef 사용법

import {useRef} from 'react';

 

React Hooks의 useRef를 사용하기 위해서는 react에서 useRef를 import 해야 한다.

 

import { useRef } from 'react';

const App = () => {
  const ref = useRef();

  const onClickButton = () => {
    ref.current.value = '';
  };

  return (
    <div>
      <input type="text" name="keyword" ref={ref} />
      <button onClick={onClickButton}>input 초기화</button>
    </div>
  );
};

기본적인 사용법은 useRef()로 객체를 생성하고 원하는 DOM에 ref객체를 넣어주면
ref.current가 해당 DOM을 가르키게되고 current를 사용해 DOM을 직접 조작 하면된다.