🐶 useRef()

리액트에서 ref는 주로 DOM 노드 참조 목적으로 사용된다. 컴포넌트 렌더링에 영향을 주지 않는 값 참조 목적으로 사용된다.

useRef()는 함수 컴포넌트 내부에서 특정 값을 지속적으로 참조할 때 사용한다. useState()와 달리 useRef()는 현재 값이 변경되어도 컴포넌트가 다시 렌더링되지 않아 애플리케이션 성능을 최적화 할 수 있다.

// useRef() 훅을 사용해 카운트 참조 생성
const countRef = useRef(0);

// 카운트 참조의 현재 값이 변경되어도 컴포넌트는 다시 렌더링 되지 않음
countRef.current = countRef.current + 1;

클래스는 자신의 인스턴스 멤버를 사용해 렌더링 상관없이 특정 값을 기억할 수 있는데 반해, 함수는 다시 렌더링 되면 매번 함수 몸체가 초기화 되므로 특정 값을 기억할 때 useRef()를 사용하면 유용하다.

🐥 useRef() 사용목적

1. DOM 요소 접근 및 조작

리액트 render() 단계에서는 DOM이 그려지기 전 단계이므로 DOM에 직접 접근할 수 없다.

하지만 useRef()를 사용하여 컴포넌트가 mount된 시점 이후 DOM 요소에 접근하여 조작할 수 있도록 도와준다.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

• 아직 DOM이 그려지기 전이라 DOM 요소에 접근하여 focus()를 활성화 시킬 수 없지만, useRef()를 사용하여 클래스 컴포넌트 생명주기를 고려하여 DOM 요소에 접근할 수 있도록 도와준다.

2. 함수 컴포넌트 내부에서 특정 값을 기억

함수 컴포넌트 내부에서 특정 값을 기억하면서 값을 변경해도 컴포넌트 렌더링에 영향을 주지 않아야한다.

import { useEffect, useRef, useState } from "react";
import randomcolor from "randomcolor";

function DoNotReRender() {
  const colorRef = useRef(0);
  const [stateValue, setStateValue] = useState(0);
  const [stateHex, setStateHex] = useState(randomcolor());
  const [refHex, setRefHex] = useState(randomcolor());

  useEffect(() => {
    setStateHex(randomcolor());
  }, [stateValue]);

  useEffect(() => {
    setRefHex(randomcolor());
  }, [colorRef]);

  return (
    <Grid lang="en">
      <GridItem
        css={`
          background: ${stateHex};
        `}
      >
        <h2>State</h2>
        <ChangeColorButton
          aria-label="state 컬러 변경"
          onClick={() => setStateValue(stateValue + 1)}
        />
        <p>컬러 변경 버튼을 누르면 컴포넌트가 다시 렌더링 됩니다.</p>
      </GridItem>
      <GridItem
        css={`
          background: ${refHex};
        `}
        onClick={() => {
          colorRef.current += 10;
          console.log(`colorRef.current = ${colorRef.current}`);
        }}
      >
        <h2>Ref</h2>
        <ChangeColorButton aria-label="ref 컬러 변경" />
        <p>컬러 변경 버튼을 누르면 컴포넌트가 다시 렌더링 될까요?</p>
      </GridItem>
    </Grid>
  );
}

• useState()의 setStateValue()메서드를 사용하여 값을 변경한 경우 재렌더링이 발생하지만, useRef()의 current 값을 갱신하면 재렌더링이 발생하지 않는다.