좋은 코드를 찾아서 - 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) !== valueusePrevious
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;