useRef

⭐DOM 요소에 접근⭐할 수 있도록 하는 hook.
리액트에서 DOM을 선택해야할 상황이 생길 수 있는데 예를 들면 화면이 렌더링 되자마자 특정 input태그가 focusing되야 하는 경우. 이럴 때 useRef를 사용한다.

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의 current에 설정한 값이 들어있다.
이렇게 설정된 ref값은 컴포넌트가 계속 렌더링 되어도 unmount 전까지 값을 유지한다.

useRef 용도

1. 저장공간

state 와 비슷한 역할을 하지만, state는 변화가 일어나면 다시 렌더링이 일어나고 내부 변수들은 초기화된다.
ref에 저장된 값은 렌더링을 일으키지 않는다. ref의 값 변화가 일어나도 렌더링으로 인해 내부 변수들이 초기화되는 것을 막을 수 있다.
컴포넌트가 100번 렌더링되더라도 ref에 저장된 값은 유지된다.

• state는 리렌더링이 꼭 필요한 값을 다룰 때 쓰자.
• ref는 리렌더링을 발생시키지 않는 값을 저장할 때 쓰자.

2. DOM

렌더링 되자마자 특정 input이 focusing되어야할 때 사용 가능하다.