SSR Warning 제거 및 Layout Flicker 방지를 위한 Isomorphic Hook 설계

Context

SSR 환경에서 useLayoutEffect 사용 시 서버단 렌더링 과정의 Paint 단계 부재로 인한 콘솔 경고 발생. 단순 useEffect 교체 시 Client-side Hydration 이후 한 프레임의 Layout Flicker가 발생하는 시각적 결함 존재.

Technical Solution

• 런타임 환경 판별을 통한 Hook 동적 할당 구조 설계
• Browser 환경에서는 Synchronous Paint 전 단계에서 실행되는 useLayoutEffect 유지
• Server 환경에서는 Warning이 발생하지 않고 실행이 유예되는 useEffect로 대체
• Module-load 시점에 단 한 번만 분기 처리하여 React Hook의 호출 순서 규칙(Call Order) 준수
• useEvent 등 내부 라이브러리 Hook에 적용하여 Ref 업데이트와 Paint 타이밍의 정밀한 동기화 달성