로딩·실패·빈 결과·성공 상태를 구분해 표시합니다.
일반 if, 삼항 연산자, &&로 상태에 맞는 UI를 선택합니다. 업무 상태를 명시적으로 모델링하면 사용자가 현재 상황과 다음 행동을 이해할 수 있습니다.
복잡한 조건은 중첩 JSX보다 상태별 조기 반환이나 이름 있는 변수로 분리합니다.
count && 요소는 count가 0일 때 0을 출력할 수 있으므로 count > 0처럼 boolean을 만듭니다.
오류와 빈 목록을 같은 화면으로 처리하면 요청 실패인지 데이터 부재인지 구분할 수 없습니다.
로컬 프로젝트에서 확인해보세요status를 loading과 error로 바꿔 각 화면을 확인하세요.
function Result({ status, items }) {
if (status === "loading") return <p>불러오는 중...</p>;
if (status === "error") return <p role="alert">요청 실패</p>;
if (!items.length) return <p>강좌가 없습니다.</p>;
return (
<ul>
{items.map((x) => (
<li key={x.id}>{x.title}</li>
))}
</ul>
);
}
export default function App() {
return (
<main>
<h1>강좌</h1>
<Result status="success" items={[{ id: 1, title: "React" }]} />
</main>
);
}