React Hooks - useRef

useRef란?

useRef는 React Hooks의 하나로, DOM 노드나  다른 React 컴포넌트와 관련된 값을 기억하고 업데이트 할 수 있는 객체를 생성한다.

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

function App() {
  const ref = useRef("초기값");
  console.log("ref", ref);

  return (
    <div>
      <p>useRef에 대한 이야기에요.</p>
    </div>
  );
}

export default App;

콘솔을 확인해보면, ref이 값은 이렇게 출력된다.

이 뿐만 아니라 변경이 가능하다.

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

function App() {
  const ref = useRef("초기값");
  console.log("ref 1", ref);

  ref.current = "바꾼 값";
  console.log("ref 1", ref);

  return (
    <div>
      <p>useRef에 대한 이야기에요.</p>
    </div>
  );
}

export default App;

콘솔은 다음과 같다.

이렇게 설정된 ref값은 컴포넌트가 계속해서 렌더링 되어도 unmount 전까지 값을 유지한다.

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

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

 

state와 ref의 차이점

state는 변경되면 렌더링 되고, ref는 변경되면 렌더링이 안된다.

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;

내부 변수에 let 사용하면 안됨? 

let 키워드를 사용하게 되면 렌더링이 어떻게 될까? 다시 변수가 초기화 됨 

그 이유는 함수라서 그렇다.

리렌더링이 된다 = 함수가 다시 호출 = 내부 변수가 다시 초기화됨

 

DOM 접근

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

import "./App.css";

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

export default App;

useRef 사용하면 포커싱 준다.

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;

화면이 렌더링 되자마자 바로 focus가 들어간다.

 

1. ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용함