refactor: change name useDidMountEffect to useDidUpdateEffect (#99)

Author: alstn113

docs/hooks/useDidMountEffect.md docs/hooks/useDidUpdateEffect.md

@@ -1,8 +1,8 @@
-# `[Hook] useDidMountEffect`
+# `[Hook] useDidUpdateEffect`
 
 ## `description`
 
-useDidMountEffect는 컴포넌트가 마운트 된 후에만 effect를 실행합니다.
+useDidUpdateEffect는 컴포넌트가 마운트 된 후에만 effect를 실행합니다.
 즉 마운트 시에는 실행되지 않고, deps가 변경될 때에만 실행됩니다.
 
 ## `type`
@@ -18,12 +18,12 @@ interface Props {
 
 ```tsx
 import { useState } from 'react';
-import { useDidMountEffect } from 'wap-ui';
+import { useDidUpdateEffect } from 'wap-ui';
 
 const App = () => {
   const [count, setCount] = useState<number>(0);
 
-  useDidMountEffect(() => {
+  useDidUpdateEffect(() => {
     console.log('count changed');
   }, [count]);
 

packages/react/src/components/Accordion/AccordionItem/AccordionItem.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import useDidMountEffect from '../../../hooks/useDidMountEffect';
+import useDidUpdateEffect from '../../../hooks/useDidUpdateEffect';
 import { useAccordionContext } from '../AccordionContext';
 import * as S from './AccordionItem.styles';
 
@@ -39,7 +39,7 @@ export const AccordionItem = ({
   }, [values, index]);
 
   /** 첫 마운트 이후부터 visible이 변경할 때 작동한다. */
-  useDidMountEffect(() => {
+  useDidUpdateEffect(() => {
     if (parentRef.current === null || childRef.current === null) return;
 
     if (!visible) {

packages/react/src/hooks/index.ts

@@ -1,4 +1,4 @@
-export { default as useDidMountEffect } from './useDidMountEffect';
+export { default as useDidUpdateEffect } from './useDidUpdateEffect';
 export { default as useDisclosure } from './useDisclosure';
 export { default as useThrottle } from './useThrottle';
 export { default as useDebounce } from './useDebounce';

packages/react/src/hooks/useDidMountEffect.ts packages/react/src/hooks/useDidUpdateEffect.ts

@@ -2,29 +2,31 @@ import React, { useRef, useEffect } from 'react';
 
 /**
  * @description
- * useDidMountEffect는 컴포넌트가 마운트 된 후에만 effect를 실행합니다.
+ * useDidUpdateEffect는 컴포넌트가 마운트 된 후에만 effect를 실행합니다.
  * 즉 마운트 시에는 실행되지 않고, deps가 변경될 때에만 실행됩니다.
  *
  * @example
  * ```tsx
  * const [count, setCount] = useState<number>(0);
- * useDidMountEffect(() => {
+ * useDidUpdateEffect(() => {
  *  console.log('count changed');
  * }, [count]);
  *
  * <button onClick={() => setCount(count + 1)}>count + 1</button>
  * ```
  */
-const useDidMountEffect = (
-  effect: React.EffectCallback,
+
+const useDidUpdateEffect = (
+  callback: () => void,
   deps: React.DependencyList,
 ) => {
   const didMount = useRef(false);
 
   useEffect(() => {
-    if (didMount.current) effect();
+    if (didMount.current) callback();
     else didMount.current = true;
-  }, [deps, effect]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
 };
 
-export default useDidMountEffect;
+export default useDidUpdateEffect;