좋은 코드를 찾아서 - usePrevious, useIsChanged

No Filled

오픈소스에서 배우기

코드는 다음과 같다.

import { useEffect, useRef } from 'react'

export const usePrevious = <TValue>(value: TValue): TValue => {
	const ref = useRef<TValue>(value)
	
	useEffect(() => {
		ref.current = value
	}, [value])
	
	return ref.current
}

export const useIsChanged = (value: unknown) => usePrevious(value) !== value

usePrevious

useRef를 사용하여 ref라는 레퍼런스를 초기화한다. 초기 값은 현재 값인 value이다.
useEffect는 value가 변경될 때마다 실행된다. ref.current에 현재 값 value를 저장한다.
usePrevious 훅은 항상 ref.current를 반환한다. 이것은 value가 변경되기 전의 값이다.

useIsChanged

usePrevious(value)를 호출하여 이전 값을 얻는다.
이전 값과 현재 값을 비교한다.
이전 값이 현재 값과 다르면 true, 같으면 false를 반환한다.

예시 코드

import React, { useState } from 'react';
import { usePrevious, useIsChanged } from './customHooks';

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

  return (
    <div>
      <p>Current Count: {count}</p>
      <p>Previous Count: {prevCount}</p>
      <p>Has Count Changed?: {isChanged ? 'Yes' : 'No'}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default ExampleComponent;