리액트 Custom Hook - useRef로 useState 이전 값 저장하기 (usePrevious)

리액트 전체 링크

 

다음과 같이 바로 직전의 값을 저장하는 커스텀 훅을 만들어보자.

 

useRef는 값이 바뀌어도 렌더링을 발생시키지 않고 현재 상태를 저장할 수 있다.

const usePrevious = (value) => {
  const ref = useRef();

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
};

 

예를 들어, setCount로 count 값이 변경된다면, usePrevious는 count 값이 변경되기 전 값을 가지게 된다.

  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

 

전체 코드는 다음과 같다.

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

const usePrevious = (value) => {
  const ref = useRef();

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
};

const PrevHook = () => {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

  return (
    <div style={{margin : 5}}>
      <p>현재 카운트: {count}</p>
      <p>이전 카운트: {prevCount}</p>
      <button onClick={() => setCount(count + 1)}>더하기</button>
      <button onClick={() => setCount(prevCount)}>되돌리기</button>
    </div>
  );
};

export default PrevHook;