함수형 컴포넌트에서 prevState 구현하기

Posted May 22, 2022

By Dain Kang

2 min read

prevState

함수형 컴포넌트는 생명주기가 없기 때문에 클래스형 컴포넌트의 componentDidUpdate 같이 prevProps, prevState를 제공하는 메서드가 없다.

함수형 컴포넌트를 만들다 보면, 이전 상태값과 현재 상태값을 특정지어서 비교해야 될 때가 생기는데 (ex. prevState는 false, currentState는 true 여야만 하는 조건을 걸어야 할 때), 어떻게 구현할 수 있을까?

useRef 사용

useRef에 prevState 값을 담아 비교할 수 있다.

  
const functionComponent = () => {
  const [state, setState] = useState(false)
  const prevState = useRef(state)

  useEffect(() => {
    if (prevState.current !== state && state) {
      // prevState가 false, state가 true인 경우
    }
    // prevState 업데이트
    prevState.current = state
  }, [state])
}

Custom Hook 사용

  
function usePrevious(value) {
  const ref = useRef()

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

  return ref.current
}

function Counter() {
  const [count, setCount] = useState(0)
  // 👇 look here
  const prevCount = usePrevious(count)

  return (
    <h1>
      Now: {count}, before: {prevCount}
    </h1>
  )
}