RENDER STATES

조건부 렌더링 상태 대응

로딩, 오류, 빈 목록, 성공 상태를 먼저 나누면 어떤 JSX가 보여야 하는지 빠르게 결정할 수 있습니다.

상태별 화면 결정

기준표

loading 데이터를 기다리는 동안 스켈레톤, 스피너, 안내문을 렌더링합니다.

error 재시도 버튼과 원인을 함께 보여 사용자가 다음 행동을 알게 합니다.

empty 목록이 비었을 때 빈 화면 대신 추가 행동을 안내합니다.

success 정상 데이터가 있을 때 실제 콘텐츠와 상호작용을 렌더링합니다.

선택 기준

if 초기 return 전에 loading, error 같은 큰 분기를 끊습니다.

? : 두 화면 중 하나를 반드시 보여야 할 때 JSX 안에서 씁니다.

&& 조건이 참일 때만 배지, 안내문, 작은 액션을 덧붙입니다.

null 컴포넌트 자체가 아무것도 그리지 않아야 할 때 반환합니다.