useRef

useRef?

useRef는 렌더링이 필요하지 않은 값을 참조할 수 있는 React Hook입니다.
-React 공식 문서

useRef는 저장 공간 또는 DOM 요소에 접근하기 위해 사용되는 React Hook이다.

• 컴포넌트에서 특정 DOM을 선택할 수 있다.
• 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리할 수 있다.

useRef는 언제 사용?

1. 컴포넌트 안의 변수 관리하기

ref는 state와 비슷하게 어떤 값을 저장해두는 저장 공간으로 사용한다.
일반적으로 state가 변화하면 리렌더링 되어 컴포넌트의 내부 변수들을 초기화 시킨다.
이런 state대신 useRef를 사용한다면 불필요한 렌더링을 막을 수 있다.
-> state 변경 시 렌더링을 발생시키지 말아야 하는 값을 다룰 때 정말 편리하다.

import React, { useRef, useState } from "react";

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

  const countRef = useRef(0);

  // console.log(countRef); 
  // ref 안에 있는 값에 접근을 하고 싶으면 countRef.current라고 적으면 된다.

  console.log("렌더링🎨");

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

  const increaseCountRef = () => {
    countRef.current = countRef.current + 1;
    console.log("Ref: ", countRef.current);
  };

  return (
    <div>
      <p>State: {count}</p>
      <p>Ref: {countRef.current}</p>
      <button onClick={increaseCountState}>State 올려</button>
      <button onClick={increaseCountRef}>Ref 올려</button>
    </div>
  );
}

export default App;

Ref올려 버튼을 클릭하면 콘솔을 통해 ref 값이 변화하는 것을 확인할 순 있지만 화면에 렌더링 되지는 않는다.

state올려 버튼을 클릭하여 리렌더링 하면 변화한 ref값을 화면을 통해 확인 할 수 있다.

2. 컴포넌트 안의 DOM 선택하기

const ref = useRef(value);

<input ref={ref} />

ref를 통해 DOM 요소에 접근해서 여러가지 일들을 할 수도 있다.
대표적으로 우리가 <input /> 요소를 클릭하지 않아도 input에 focus를 주고 싶을 때(input을 클릭하지 않아도 바로 입력 가능하도록) 많이 사용한다.
javascript에서 DOM 요소를 선택하는 document.querySelector()와 같다.

import React, { useEffect, useRef } from "react";

const Dom = () => {
  const inputRef = useRef();

  useEffect(() => {
    // console.log(inputRef);
    inputRef.current.focus();
  }, []);

  const login = () => {
    alert(`환영합니다 ${inputRef.current.value}`);
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="username" />
      <button onClick={login}>로그인</button>
    </div>
  );
};

export default Dom;

화면이 렌더링 되자마자 input에 focus가 적용되어, input을 클릭하지 않아도 바로 input에 값을 입력할 수 있다.

useRef의 장점

컴포넌트 안에 자주 바뀌는 값을 state에 넣으면 state가 변할 때마다 매번 렌더링이 진행되어 성능에 안 좋은 영향을 끼치게 된다.
하지만, useRef를 사용해 그 값을 관리하면 값이 아무리 바뀌어도 렌더링이 발생하지 않아 성능에 좋다(?).

별코딩 유튜브
React 공식 문서