useRef

useRef

1. 변수 관리 시 사용
2. 특정 DOM 선택 시 사용

---

변수 관리

state 를 사용해서 state 가 변경되면 컴포넌트가 다시 렌더링됨
ref 를 사용하면 ref 가 변경되어도 다시 렌더링되지 않음
ref 값은 생명주기 동안 유지됨

 

useRef vs useState vs let

import { useRef, useState } from 'react';

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

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

  const increaseState = () => {
    setCount((prev) => prev + 1);
  };

  const increaseVariable = () => {
    countVariable++;
  };

  return (
    <div>
      <p>Ref {countRef.current}</p>
      <p>State {count}</p>
      <p>Variable {countVariable}</p>

      <div>
        <button onClick={increaseRef}>Ref +</button>
        <button onClick={increaseState}>State +</button>
        <button onClick={increaseVariable}>Variable +</button>
      </div>
    </div>
  );
}

export default App;

Ref 버튼 클릭 시

• ref의 값은 현재 값 + 1이 됨
• 리렌더링 되지 않아 화면에서 확인 불가능
• State 버튼 클릭 시 state 가 변경되어 리렌더링이 되고 증가된 값 확인 가능 (값 유지)

 

State 버튼 클릭 시

• state의 값은 현재 값 + 1이 됨
• 리렌더링 되어 화면에서 확인 가능

 

Variable 버튼 클릭 시

• variable의 값은 현재 값 + 1이 됨
• 화면에서 확인 불가능
• State 버튼 클릭 시 state가 변경되어 리렌더링이 되고 variable 값이 초기화 됨

 

렌더링 횟수 기록하기

import { useEffect, useRef, useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState('');
  const countRef = useRef(0);
  const renderCountRef = useRef(0);
  let countVariable = 0;

  // 종속성 배열이 없으면 어떤 state든 변경되면 useEffect가 실행됨
  useEffect(() => {
    renderCountRef.current++;
  });

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

  const increaseState = () => {
    setCount((prev) => prev + 1);
  };

  const increaseVariable = () => {
    countVariable++;
  };

  return (
    <div>
      <p>Ref {countRef.current}</p>
      <p>State {count}</p>
      <p>Variable {countVariable}</p>
      <p>I rendered {renderCountRef.current} times</p>

      <input value={value} onChange={(e) => setValue(e.target.value)} />

      <div>
        <button onClick={increaseRef}>Ref +</button>
        <button onClick={increaseState}>State +</button>         
        <button onClick={increaseVariable}>Variable +</button>
      </div>
    </div>
  );
}

export default App;

Ref 버튼 클릭 시

• 리렌더링 되지 않음
• 렌더링 횟수가 변화 없음

 

State 버튼 클릭 시

• state 가 변경되어 리렌더링 됨
• 렌더링 횟수가 + 1 됨

 

Variable 버튼 클릭 시

• 리렌더링 되지 않음
• 렌더링 횟수가 변화 없음

 

input 요소의 값 변경 시

• state 가 변경되어 리렌더링 됨
• 렌더링 횟수가 + 1 됨

---

특정 DOM 선택

useRef 는 사용 범위가 컴포넌트 내부임
getElementById 등을 사용하면 어디에 있는 요소이든 가져올 수 있음
useRef 를 사용해서 생성된 컴포넌트 외부에서 사용하기 위해서는 props로 전달해 주어야 함
useRef 의 사용 범위가 더 작기 때문에 유지보수에 용이함

일반 css 보다 styled-componenet 가 리액트 컴포넌트를 위한 스타일링으로 최적화 된 것 처럼
getElementById 등 보다 useRef 를 사용하는 것이 더 리액트에 최적화 된 방법임