React Hook - useRef

useRef란?

useRef hook 소개

DOM 요소에 접근할 수 있도록 하는 React Hook 입니다.

리액트에서도 DOM을 선택해야 할 상황이 있습니다. 예를 들면 화면이 렌더링 되자마자 특정 input 태그가 focusing이 돼야 하는 경우 등이요. 그럴 경우에 우리는 useRef hook을 사용합니다.

useRef의 용도

useRef 의 값은 컴포넌트가 계속해서 렌더링 되어도 unmount 전까지 값을 유지합니다!

이러한 특징 때문에 useRef는 다음 2가지 용도로 사용됩니다.

1. 저장공간

   • state와 비슷한 역할을 해요. 다만 state는 변화가 일어나면 다시 렌더링이 일어나요. 내부 변수들은 초기화가 됩니다.
   • useRef에 저장한 값은 렌더링을 일으키지 않아요. 즉, ref의 값 변화가 일어나도 렌더링으로 인해 내부 변수들이 초기화 되는 것을 막을 수 있습니다..
   • 컴포넌트가 100번 렌더링 → ref에 저장한 값은 유지됩니다.
   • 정리하면
     1 state는 리렌더링이 꼭 필요한 값을 다룰 때 쓰면 된다.
     2 ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용한다.

2. DOM

   • 렌더링 되자마자 특정 input이 focusing 돼야 한다면 useRef를 사용하면 됩니다.

예제 코드로 특징 살펴보기

state 와 useRef 의 차이

아래의 코드에서 plusStateCountButtonHandler 는 state 여서 Button을 누르면 렌더링 됩니다.
그러나 plusRefCountButtonHandler 는 useRef 여서 위의 설명처럼 눌러도 값은 변경되지만 렌더링 되지 않습니다.

import "./App.css";
import { useRef, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(0);

  const plusStateCountButtonHandler = () => {
    setCount(count + 1);
  };

  const plusRefCountButtonHandler = () => {
    countRef.current++;
  };

  return (
    <>
      <div>
        state 영역입니다. {count} <br />
        <button onClick={plusStateCountButtonHandler}>state 증가</button>
      </div>
      <div>
        ref 영역입니다. {countRef.current} <br />
        <button onClick={plusRefCountButtonHandler}>ref 증가</button>
      </div>
    </>
  );
}

export default App;

DOM 접근**

<input /> 태그에는 ref라는 속성이 있습니다. 이걸 통해 우리는 해당 DOM 요소로 접근할 수 있습니다.

idRef 라는 useRef를 만들어 주고 <input ref={idRef}/> 라고 작성하면 input에 idRef 가 연결되었습니다.

useEffect 를 사용해서 실행될 때 focus 되게 아래처럼 작성해 주면 화면을 들어갔을 때 저렇게 포거싱 되는것입니다.

import { useEffect, useRef } from "react";
import "./App.css";

function App() {
  const idRef = useRef("");

  // 렌더링이 될 때
  useEffect(() => {
    idRef.current.focus();
  }, []);

  return (
    <>
      <div>
        아이디 : <input type="text" ref={idRef} />
      </div>
      <div>
        비밀번호 : <input type="password" />
      </div>
    </>
  );
}

export default App;