반응형
다음과 같이 바로 직전의 값을 저장하는 커스텀 훅을 만들어보자.
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;
반응형
댓글