feat(@nf-team/react): useEffectOnce hook 구현

.changeset/clever-pumas-invite.md

@@ -0,0 +1,5 @@
+---
+"@nf-team/react": minor
+---
+
+feat(@nf-team/react): useEffectOnce hook 구현

packages/react/src/hooks/index.ts

@@ -1,6 +1,7 @@
 export { default as useActionKeyEvent } from './useActionKeyEvent';
 export { default as useBoolean } from './useBoolean';
 export { default as useDebounce } from './useDebounce';
+export { default as useEffectOnce } from './useEffectOnce';
 export { default as useIsFirstRender } from './useIsFirstRender';
 export { default as useIsMounted } from './useIsMounted';
 export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';

packages/react/src/hooks/useEffectOnce.test.ts

@@ -0,0 +1,29 @@
+import { act, renderHook } from '@testing-library/react';
+
+import useEffectOnce from './useEffectOnce';
+
+describe('useEffectOnce', () => {
+  const effectCallback = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const useEffectOnceHook = () => renderHook(() => useEffectOnce(effectCallback));
+
+  it('effect callback 함수가 1번 호출되어야만 한다', () => {
+    useEffectOnceHook();
+
+    expect(effectCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it('rendering이 여러번 발생해도 effect callback 함수가 1번 호출되어야만 한다', () => {
+    const { rerender } = useEffectOnceHook();
+
+    act(() => {
+      rerender();
+    });
+
+    expect(effectCallback).toHaveBeenCalledTimes(1);
+  });
+});

packages/react/src/hooks/useEffectOnce.ts

@@ -0,0 +1,7 @@
+import { EffectCallback, useEffect } from 'react';
+
+function useEffectOnce(effect: EffectCallback) {
+  useEffect(effect, []);
+}
+
+export default useEffectOnce;