React - useRef

React - useRef

 

https://www.daleseo.com/react-hooks-use-ref/

React Hooks: useRef 사용법

(해당 글은 위 블로그를 참조하였습니다.)

 

이번 글에서는 리액트에서 특정 상황에서 사용하는 유용한 함수 훅인 useRef에 대해서 소개하려고 한다.

 

useRef는 인자를 넣어 정의하면 current 값을 가진 객체를 반환하게 되는데 이 current 값에 인자가 들어가게 된다. 

 

보편적으로 useRef를 사용하는 상황은 3가지로 나뉜다.

1. 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때

2. 애니메이션을 직접적으로 실행시킬 때

3. 서드 파티 DOM 라이브러리를 React와 같이 사용할 떄.

 

선언적으로 해결될 수 있는 문제(ex. 화살표 아이콘을 통한 제어)는 ref 사용을 지양하고 props를 통해 해결.

 

필자는 input 요소에 연결시키는 방법이나 useRef로 인한 변수를 관리하는 방법이 아닌 setInterval와 관련한 내용을 다뤄볼 것이다. 

 

우리는 자동으로 카운트하는 코드를 아래와 같이 작성할 수 있다.

렌더링이 되고 난 후에 작동이 되는 useEffect 내부에서 count가 변화하게 되고 이는 state변화로 이어져 app 컴포넌트를 재렌더링하게 된다. 하지만 useEffect의 두번째 인자는 빈 배열이기 때문에 이 부분은 작동하지 않는다. 

 

그럼에도 interValId는 setInterval이 DomApI로 실행되고 있기 때문에 브라우저에 남아서 콜백함수를 실행하고 있다. 

자동으로 카운트하는 코드로는 좋아보이는 방법이다.

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


function App() {
  const [count, setCount] = useState(0);
  console.log(`렌더링... count: ${count}`)

  useEffect(() => {
    console.log('useEffect');
    const interValId = setInterval(() => setCount((count) => count +1), 1000);
    return () => clearInterval(interValId);
  }, []);

  return (
    <div>
      <p>자동 카운트: {count}</p>
    </div>
  );
}

export default App;

 

이번에는 자동카운트 기능과 더불어 카운트를 시작하고 정지하는 기능을 구현해보자.

우선 intervalId는 카운트를 시작시키는 함수와 정지시키는 함수 둘 다 내부에서 사용해야하기 때문에 최상단에서 정의가 되어야 한다. 얼핏 보면 문제가 없어 보이지만 intervalId가 정의된 방식을 살펴보면 문제가 보인다. 

 

먼저 startCounter함수를 실행시켰을 때 우리는 count state를 조작하게 된다. state가 조작되면 재렌더링이 일어나고 intervalId가 다시 새롭게 정의가 된다. 이것이 의미하는 것은 기존에 setInterval을 걸어놓았던 intervalId가 clear되지 않은상태로 브라우저에 남아있을 거라는 것이다. 위의 useEffect예시에서는 intervalId가 전역으로 선언되어있지 않아서 변하지 않았던 게 이 예시에서는 걸림돌이 되는 것이다.

 

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


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

  let intervalId; 
  const startCounter = () => {
    intervalId = setInterval(()=> setCount((count) => count+1), 1000);
  };

  const stopCounter = () => {
    clearInterval(intervalId);
  };

  return (
    <div>
      <p>자동 카운트: {count}</p>
      <button onClick={startCounter}>시작</button>
      <button onClick={stopCounter}>정지</button>
    </div>
  );
}

export default App;

 

그럼 우리는 생각하게 된다. 'intervalId가 계속 변하기 때문에 브라우저에 남게되면 변하지 않게하면 되지 않을까?'

그래서 사용하는 게 useRef이다. 

useRef로 정의 된 변수는 컴포넌트가 재렌더링할 때 current 속성의 값이 유실되지 않는다. 아래 코드를 보자.

 

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


function App() {
  const [count, setCount] = useState(0);
  const intervalId = useRef(null);
  console.log(`렌더링  ... count: ${count}`);

  const startCounter = () => {
    intervalId.current = setInterval(() => setCount((count) => count+1), 1000);
    console.log(`시작... intervalId: ${intervalId.current}`);
  }

  const stopCounter = () => {
    clearInterval(intervalId.current);
    console.log(`정지... intervalId: ${intervalId.current}`);
  }

  return (
    <div>
      <p>자동 카운트: {count}</p>
      <button onClick={startCounter}>시작</button>
      <button onClick={stopCounter}>정지</button>
    </div>
  );
}

export default App;

 

intervalId를 useRef로 정의한 뒤 startCounter 부분에서 intervalId.current에 setInterval함수를 넣으면 재렌더링이 되어도 초기에 저장해 두었던 setInterval DOM API의 값을 유지하게 된다. 이는 stopCounter함수에 대해서도 일관성을 주기 때문에 의도하는 setInterval DOM API를 지울 수 있게 된다.