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

roads/2024/09/30.mdx

@@ -0,0 +1,63 @@
+---
+title: '좋은 코드를 찾아서 - usePrevious, useIsChanged'
+date: '2024-09-30'
+slug: '2024-09-30'
+type: 'road'
+---
+
+## 오픈소스에서 배우기
+
+코드는 다음과 같다.
+
+```ts
+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`를 반환한다.
+
+### 예시 코드
+
+```ts
+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;
+```