[React] 리액트 Hooks (3) - useRef: 변수 관리

📌 useRef란?

함수형 컴포넌트에서 useRef를 호출하면 ref Object를 반환합니다. ref Object의 형태는 다음과 같습니다.

{ current: value }

• 인자로 넣어준 초기값이 저장이 됩니다.
• 수정이 가능하기 때문에 언제든 원하는 값으로 변경 가능합니다.
• 컴포넌트가 렌더링이 되어도 언마운트 되기 전까지는 값을 계속 유지할 수 있습니다.

📌 언제 useRef를 사용하나요?

1. ref는 state와 비슷하게 값을 저장해두는 저장 공간으로 사용이 됩니다.

state가 변경이 되면 리렌더링이 되고 함수가 다시 호출되기 때문에 컴포넌트 내부 변수들을 초기화합니다. 그래서 원하지 않는 렌더링 때문에 곤란해지는 경우가 생깁니다.

ref가 변화해도 컴포넌트가 리렌더링이 되지 않습니다. 따라서 변수들의 값이 유지가 됩니다. 만약 state의 변화로 인해 컴포넌트가 렌더링이 되어도 ref의 값은 유지가 됩니다.

2. ref를 통해 DOM 요소에 접근할 수 있습니다.

대표적으로 input 요소를 클릭하지 않아도 focus를 주고 싶을 때 사용합니다. 로그인 화면이 보여졌을 때, 자동적으로 포커스가 되게끔 만들 수 있습니다. 이런 기능은 javascript의 Document.querySelector()와 비슷한 기능을 합니다.

 

📚 ref.current

먼저 현재 state(count) 값을 보여주면서 버튼을 클릭시 setState(setCount)를 이용해 state 값을 1씩 증가시키는 컴포넌트를 만들어 보겠습니다.

 

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

  const increaseCountState = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <h1>State: {count}</h1>
      <button onClick={() => increaseCountState()}>State +1</button>
    </div>
  );
};

export default App;

 

버튼을 눌렀을 때 state 값이 변화하는 것을 바로 볼 수 있는 이유는 컴포넌트가 계속 렌더링이 되기 때문입니다.

 

이제 useRef를 사용해보겠습니다.

  const countRef = useRef(0);
  console.log(countRef);

 

해당 코드를 App 컴포넌트 안에 넣어 콘솔을 확인해보겠습니다.

 

countRef는 current라는 값을 가지며 current 안에서는 처음에 설정해둔 0이라는 초기값을 확인할 수 있습니다.

countRef.current로 이 값에 접근할 수 있습니다. state를 활용한 방식 그대로 하단에 ref 값을 1씩 추가하는 버튼을 만들어보겠습니다.

import React, { useEffect, useState, useRef } from "react";
import "./App.css";

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

  const increaseCountState = () => {
    setCount(count + 1);
    console.log("State: ", count + 1);
  };

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

  return (
    <div>
      <h1>State: {count}</h1>
      <h1>Ref: {countRef.current}</h1>
      <button onClick={() => increaseCountState()}>State +1 </button> // 렌더링이 됩니다.
      <button onClick={() => increaseCountRef()}>Ref +1</button> // 렌더링이 되지 않습니다.
    </div>
  );
};

export default App;

 

Ref + 1 버튼을 아무리 눌러도 화면에 숫자가 늘어나지 않지만, State + 1 버튼을 누르면 화면에서 숫자가 ref의 current 값으로 변경되는 것을 볼 수 있습니다. state가 변경이 되었을 때 컴포넌트가 다시 렌더링 되기 때문입니다. 즉, 전체 화면이 다시 그려집니다.

 

매우 자주 바뀌는 값을 state로 보관한다면 이 값이 변경될 때마다 렌더링이 될 것입니다. 하지만 ref에 보관한다면 변경될 때마다 렌더링이 되지 않기 때문에 더 좋은 성능을 유지할 수 있습니다.

 

 

📚 ref VS var

이번에는 ref와 var를 올려주는 컴포넌트를 만들어보겠습니다.

const App = () => {
  const countRef = useRef(0);
  let countVar = 0;

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

  const increaseVar = () => {
    countVar += 1;
    console.log("var: ", countVar);
  };

  return (
    <div>
      <h1>Ref: {countRef.current}</h1>
      <h1>Var: {countVar}</h1>
      <button onClick={increaseRef}>Ref +</button>
      <button onClick={increaseVar}>Var +</button>
    </div>
  );
};
export default App;

 

 

이렇게 버튼을 클릭해도 ref와 변수 모두 변경되는 것을 볼 수 있지만, 컴포넌트를 렌더링하지 않기 때문에 화면에서 볼 수는 없습니다. 그래서 렌더링을 담당하는 버튼을 하나 만들어보겠습니다.

 

const App = () => {
  const [renderer, setRenderer] = useState(0);
  const countRef = useRef(0);
  let countVar = 0;

  const doRendering = () => {
    setRenderer(renderer + 1);
  };

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

  const increaseVar = () => {
    countVar += 1;
    console.log("var: ", countVar);
  };

  return (
    <div>
      <h1>Ref: {countRef.current}</h1>
      <h1>Var: {countVar}</h1>
      <button onClick={setRenderer}>렌더링</button>
      <button onClick={increaseRef}>Ref +</button>
      <button onClick={increaseVar}>Var +</button>
    </div>
  );
};
export default App;

 

ref와 var 값을 늘리는 버튼을 각각 두번씩 클릭하고 렌더링 버튼을 클릭하면

 

 

Ref 값만 다시 그려지게 됩니다. Var의 값은 0으로 그대로입니다.

이유는 컴포넌트가 렌더링이 된다는 것 = 컴포넌트를 나타내는 함수를 다시 호출 = 함수 내부에 있는 변수가 초기화

되기 때문에 변수는 계속 초기화가 됩니다. 하지만, ref의 값은 생애주기(마운트 시점부터 언마운트 시점까지)를 통해 유지되기 때문에 렌더 이전에 가지고 있던 값에서 변경이 됩니다. 변수는 다시 0부터 시작하기 때문에 다시 처음부터 변경이 됩니다.

 

 

📚 useRef 렌더링할 때 활용하기

그럼 이제, count 값을 1씩 증가시켜주는 컴포넌트를 만들고 하단에 렌더링이 된 횟수를 보여주도록 하겠습니다.

 

useEffect 사용?

접근 방식

1. useState로 renderCount라는 새로운 state를 만들기

2. useEffect는 매번 렌더링이 될 때마다 실행되니 함께 setRenderCount(renderCount +1) 실행시키기

import React, { useEffect, useState, useRef } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(1);
  const [renderCount, setRenderCount] = useState(1);

  useEffect(() => {
  console.log("렌더링");
  setRenderCount(renderCount + 1);
  });

  return (
    <div>
      <h1>Count: {count}</h1>
      <h1>렌더링: {renderCount}</h1>
      <button onClick={() => setCount(count + 1)}>count +</button>
    </div>
  );
};
export default App;

 

하지만 이렇게 코드를 작성하면 오류가 발생합니다. 끊임없이 렌더링이 발생하게 됩니다.

 

왜 useEffect를 사용하면 무한 반복이 될까?

1. 버튼을 클릭하면 setCount로 인해 count 값이 변경됩니다. 그래서 렌더링이 되기 때문에 useEffect도 호출됩니다.

2. useEffect 내부에도 renderCount를 업데이트하는 코드가 존재합니다. 즉, renderCount 값이 변경됩니다.

3. state 값이 변경되었기 때문에 다시 useEffect를 호출합니다 ... 반복

 

useRef 이용하기

그래서 다음과 같이 useRef를 사용하여 렌더링 수를 renderCount.current로 보여주겠습니다.

const App = () => {
  const [count, setCount] = useState(1);
  const renderCount = useRef(1);

  useEffect(() => {
    renderCount.current = renderCount.current + 1;
    console.log("렌더링 수: ", renderCount.current);
  });

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>count +</button>
    </div>
  );
};
export default App;

 

오류 없이 콘솔에서 확인이 가능합니다. 그런데, Count는 1인데 렌더링 수는 2라고 표시가 되었습니다. 

이유는 먼저 renderCount를 useRef(1)을 통해 1로 초기화 했고, 화면을 처음 렌더링하면서 renderCount.current + 1을 하면서 2가 되기 때문입니다. 이제 버튼을 클릭할 때마다 콘솔에서 정상적으로 바뀐 렌더링 수를 볼 수 있습니다.

 

이렇게 useRef는 변화는 감지해야 하지만, 렌더링을 발생시키면 안 되는 값을 다룰 때 사용하면 유용합니다.

 

참고 자료

https://www.youtube.com/watch?v=VxqZrL4FLz8&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=3