[React - 7] useRef

구문

const 변수 = useRef(초기값)

---

특징

1. useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않는다.

2. useRef는 렌더링이 되어도 값을 유지한다. (저장 기능이 용이하다!)

3. useRef는 DOM요소에 접근 하는것도 가능하다.

 

• focus
• text selection
• media playback
• 애니메이션 적용
• d3.js, greensock 등 DOM 기반 라이브러리 활용

4. 원하는 태그 속성에 ref={} 의 형태로 작성하여 useRef() 주소와 연동이 된다.

 

5. useRef를 console.log를 찍으면 {current: 현재값}이 나온다.

그리고 이 값을 수정이나 조회 할 때는 current를 쓰면 된다. 

---

useRef 활용 1 (DOM)

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

---

useRef 활용 2 (변수 관리)

import { useRef, useState } from "react";

let globalCount = 0

function App() {
  const [stateCount, setStateCount] = useState(0);
  const refCount = useRef(0);

  return (
    <div>
      <h3>Component</h3>

      <button onClick={() => setStateCount((prev) => prev + 1)}>
        plus state
      </button>

      <button onClick={() => refCount.current += 1}>
        plus ref
      </button>

      <button onClick={() => globalCount += 1}>
        plus value
      </button>

      <div>stateCount: <strong>{stateCount}</strong></div>
      <div>refCount: <strong>{refCount.current}</strong></div>
      <div>globalCount: <strong>{globalCount}</strong></div>
    </div>
  );
}

export default App

이 코드에서 반드시 확인해야 할 것

 

1. useRef는 렌더링이 되어도 값을 유지한다.

2. useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않는다.

3. globalCount도 값이 바뀌어도 렌더링이 되지 않는다.

4. stateCount가 변하는 순간 useRef, valueCount가 렌더링이 된다.

 

useRef로 선언한 객체는 이와 달리, 컴포넌트와 생애주기를 함께합니다. 

컴포넌트가 생성됨과 동시에 값이 초기화되고, 컴포넌트가 unMount 되면 메모리에서 해제될 것입니다.

요악해서 globalCount와 가장 큰 다른점은,

컴포넌트 재사용시마다 변수도 각 컴포넌트에 맞게 새롭게 초기화 된다는 것을 의미합니다.