diff --git a/package.json b/package.json index 62f6aa89..9acff4f1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-simplikit", - "version": "0.0.40", + "version": "0.1.0", "main": "./src/index.ts", "type": "module", "sideEffects": false, diff --git a/src/hooks/useClientLayoutEffect/index.ts b/src/hooks/useClientLayoutEffect/index.ts new file mode 100644 index 00000000..61b0c1ea --- /dev/null +++ b/src/hooks/useClientLayoutEffect/index.ts @@ -0,0 +1 @@ +export { useClientLayoutEffect } from './useClientLayoutEffect.ts'; diff --git a/src/hooks/useIsomorphicLayoutEffect/ko/useIsomorphicLayoutEffect.md b/src/hooks/useClientLayoutEffect/ko/useIsomorphicLayoutEffect.md similarity index 91% rename from src/hooks/useIsomorphicLayoutEffect/ko/useIsomorphicLayoutEffect.md rename to src/hooks/useClientLayoutEffect/ko/useIsomorphicLayoutEffect.md index f18ad5fe..45022309 100644 --- a/src/hooks/useIsomorphicLayoutEffect/ko/useIsomorphicLayoutEffect.md +++ b/src/hooks/useClientLayoutEffect/ko/useIsomorphicLayoutEffect.md @@ -1,4 +1,4 @@ -# useIsomorphicLayoutEffect +# useClientLayoutEffect SSR 환경에서는 DOM에 대한 접근이 불가하기 때문에 useLayoutEffect 훅 사용 시 경고가 발생해요. 이 훅은 브라우저에서 SSR 경고를 트리거하지 않고 useLayoutEffect의 동작을 제공해요. DOM 업데이트 후 페인트 전에 동기적으로 실행되며, 다음과 같은 상황에서 효과적으로 사용할 수 있어요: @@ -10,7 +10,7 @@ SSR 환경에서는 DOM에 대한 접근이 불가하기 때문에 useLayoutEffe ## 인터페이스 ```ts -function useIsomorphicLayoutEffect( +function useClientLayoutEffect( effect: React.EffectCallback, deps: React.DependencyList ): void; @@ -38,7 +38,7 @@ function useIsomorphicLayoutEffect( ## 예시 ```tsx -useIsomorphicLayoutEffect(() => { +useClientLayoutEffect(() => { // 클라이언트 측의 레이아웃 단계에서 실행될 코드 }, [dep1, dep2, ...]); ``` diff --git a/src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.md b/src/hooks/useClientLayoutEffect/useClientLayoutEffect.md similarity index 67% rename from src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.md rename to src/hooks/useClientLayoutEffect/useClientLayoutEffect.md index acc398da..b4090d3e 100644 --- a/src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.md +++ b/src/hooks/useClientLayoutEffect/useClientLayoutEffect.md @@ -1,6 +1,6 @@ -# useIsomorphicLayoutEffect +# useClientLayoutEffect -`useIsomorphicLayoutEffect` is a React hook that provides the behavior of `useLayoutEffect` without triggering warnings during server-side rendering. During SSR, there is no DOM to synchronously measure or mutate, so React warns about using `useLayoutEffect`. +`useClientLayoutEffect` is a React hook that provides the behavior of `useLayoutEffect` without triggering warnings during server-side rendering. During SSR, there is no DOM to synchronously measure or mutate, so React warns about using `useLayoutEffect`. This hook runs synchronously after DOM updates but before paint, making it ideal for: @@ -12,7 +12,7 @@ This hook runs synchronously after DOM updates but before paint, making it ideal ## Interface ```ts -function useIsomorphicLayoutEffect( +function useClientLayoutEffect( effect: React.EffectCallback, deps: React.DependencyList ): void; @@ -40,7 +40,7 @@ This hook does not return anything. ## Example ```tsx -useIsomorphicLayoutEffect(() => { +useClientLayoutEffect(() => { // Code to be executed during the layout phase on the client side }, [dep1, dep2, ...]); ``` diff --git a/src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.spec.ts b/src/hooks/useClientLayoutEffect/useClientLayoutEffect.spec.ts similarity index 56% rename from src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.spec.ts rename to src/hooks/useClientLayoutEffect/useClientLayoutEffect.spec.ts index 7c12233b..c101ff79 100644 --- a/src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.spec.ts +++ b/src/hooks/useClientLayoutEffect/useClientLayoutEffect.spec.ts @@ -1,6 +1,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; -describe('useIsomorphicLayoutEffect', () => { +describe('useClientLayoutEffect', () => { const originalWindow = global.window; beforeEach(() => { @@ -11,20 +11,20 @@ describe('useIsomorphicLayoutEffect', () => { global.window = undefined as unknown as Window & typeof globalThis; const { useEffect, useLayoutEffect } = await import('react'); - const { useIsomorphicLayoutEffect } = await import('./useIsomorphicLayoutEffect.ts'); + const { useClientLayoutEffect } = await import('./useClientLayoutEffect.ts'); - expect(useIsomorphicLayoutEffect).toBe(useEffect); - expect(useIsomorphicLayoutEffect).not.toBe(useLayoutEffect); + expect(useClientLayoutEffect).toBe(useEffect); + expect(useClientLayoutEffect).not.toBe(useLayoutEffect); }); it('should use useLayoutEffect on client side', async () => { global.window = originalWindow; const { useEffect, useLayoutEffect } = await import('react'); - const { useIsomorphicLayoutEffect } = await import('./useIsomorphicLayoutEffect.ts'); + const { useClientLayoutEffect } = await import('./useClientLayoutEffect.ts'); - expect(useIsomorphicLayoutEffect).toBe(useLayoutEffect); - expect(useIsomorphicLayoutEffect).not.toBe(useEffect); + expect(useClientLayoutEffect).toBe(useLayoutEffect); + expect(useClientLayoutEffect).not.toBe(useEffect); }); afterEach(() => { diff --git a/src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts b/src/hooks/useClientLayoutEffect/useClientLayoutEffect.ts similarity index 74% rename from src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts rename to src/hooks/useClientLayoutEffect/useClientLayoutEffect.ts index 0b1371d2..d569ea54 100644 --- a/src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts +++ b/src/hooks/useClientLayoutEffect/useClientLayoutEffect.ts @@ -4,7 +4,7 @@ const isServer = typeof window === 'undefined'; /** * @description - * `useIsomorphicLayoutEffect` is a React hook that provides the behavior of `useLayoutEffect` without triggering warnings during server-side rendering. + * `useClientLayoutEffect` is a React hook that provides the behavior of `useLayoutEffect` without triggering warnings during server-side rendering. * During SSR, there is no DOM to synchronously measure or mutate, so React warns about using `useLayoutEffect`. * * This hook runs synchronously after DOM updates but before paint, making it ideal for: @@ -18,8 +18,8 @@ const isServer = typeof window === 'undefined'; * @param {React.DependencyList} [deps] - An optional array of dependencies. * * @example - * useIsomorphicLayoutEffect(() => { + * useClientLayoutEffect(() => { * // Code to be executed during the layout phase on the client side * }, [dep1, dep2, ...]); */ -export const useIsomorphicLayoutEffect = isServer ? useEffect : useLayoutEffect; +export const useClientLayoutEffect = isServer ? useEffect : useLayoutEffect; diff --git a/src/hooks/useIsomorphicLayoutEffect/index.ts b/src/hooks/useIsomorphicLayoutEffect/index.ts deleted file mode 100644 index b73a3519..00000000 --- a/src/hooks/useIsomorphicLayoutEffect/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.ts'; diff --git a/src/index.ts b/src/index.ts index 111f1168..9fd51c4f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -15,7 +15,7 @@ export { useImpressionRef } from './hooks/useImpressionRef/index.ts'; export { useInputState } from './hooks/useInputState/index.ts'; export { useIntersectionObserver } from './hooks/useIntersectionObserver/index.ts'; export { useInterval } from './hooks/useInterval/index.ts'; -export { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect/index.ts'; +export { useClientLayoutEffect } from './hooks/useClientLayoutEffect/index.ts'; export { useLoading } from './hooks/useLoading/index.ts'; export { useLongPress } from './hooks/useLongPress/index.ts'; export { useMap } from './hooks/useMap/index.ts';