ClientOnly

<ClientOnly fallback={fallback}>
  {children}
</ClientOnly>

✨ 어떤 기능을 하나요?

ClientOnly는 하위 리액트 요소가 클라이언트에서만 사용되는 것을 보장하는 것을 선언하는 리액트 컴포넌트입니다.

ClientOnly는 개발 시 클라이언트가 클라이언트에서만 동작하는 요소를 참조해서 동작하거나, 빌드 시와 실제 동작 시의 일관성을 보장할 수 없을 때 사용됩니다. ClientOnly는 SSG로 빌드할 때, 클라이언트에서 하이드레이션할 때에는 fallback 컴포넌트를 렌더링하고, 컴포넌트가 클라이언트에서 마운트가 완료될 때 children을 렌더링함으로써 빌드 시와 실제 동작 시 하이드레이션 오류를 해결합니다.

💡 사용 예제

<ClientOnly fallback={<div>스켈레톤 그릴 예정</div>}>
  <Random />
</ClientOnly>

컴포넌트가 매번 랜덤한 값을 렌더링해야 하거나, 현재 시각을 받아올 때의 경우, 빌드되는 시점과 실제 클라이언트에서 보이는 시점의 값이 다를 수 있습니다. 이 경우, 해당 컴포넌트를 사용할 때, ClientOnly 컴포넌트로 컴포넌트를 감싸면 됩니다.

🔌 인터페이스

• fallback : 빌드할 때 보여지는 폴백 컴포넌트입니다. 모든 렌더링 가능한 리액트 요소가 들어갈 수 있습니다.
• children : 클라이언트에서 실제로 보여지는 컴포넌트입니다. 모든 렌더링 가능한 리액트 요소가 들어갈 수 있습니다.