지연 로딩

이미 content가 있고 visible할 때만 렌더링하고 싶다면 Observer를 사용하세요. Visibility가 data loading을 시작해야 한다면 Slacker를 사용하세요.

<Observer rootMargin="200px" fallback={<ChartPlaceholder />} triggerOnce>
  <HeavyChart />
</Observer>

<Slacker loader={loadChartData} loadingFallback={<ChartPlaceholder />}>
  {(data) => <HeavyChart data={data} />}
</Slacker>

실전 지침

• User가 content에 도달하기 전에 preload하려면 rootMargin을 설정하세요.
• 처음 visible된 뒤 계속 mount되어야 하는 content는 triggerOnce를 사용하세요.
• Component 안에서 loader를 선언한다면 useCallback으로 안정적으로 유지하세요.
• Layout shift를 줄이려면 fallback에 실제 높이를 주세요.