JSX는 어떤 JavaScript 표현식이든 render할 수 있으므로, 조건부 렌더링은 그저 { } 안에서 사용하는 일반적인 JS일 뿐입니다.
jsx
() {
(
);
}
JSX는 어떤 JavaScript 표현식이든 render할 수 있으므로, 조건부 렌더링은 그저 { } 안에서 사용하는 일반적인 JS일 뿐입니다.
() {
(
);
}
cond && <X/> — cond가 truthy일 때 <X/>를 render하고, 그렇지 않으면 아무것도 render하지 않습니다. "표시 또는 숨김"에 적합합니다.cond ? <A/> : <B/> — 두 분기 중 선택합니다.null**을 반환합니다.&&{count && <Badge n={count} />} // ❌ count === 0일 때 React가 화면에 "0"을 render함!
{count > 0 && <Badge n={count} />} // ✅ 실제 boolean으로 가드
이는 0 && x가 0으로 평가되고, React가 숫자 0을 render하기 때문입니다(단, false/null/undefined는 render하지 않습니다).
로직이 복잡해지면 가독성을 위해 return 전에 element를 계산하세요:
let content;
if (error) content = <Error />;
else if (loading) content = <Spinner />;
else content = <List items={items} />;
return <div>{content}</div>;
이는 JSX를 평평하게 유지하고 결정 로직을 명확하게 만듭니다.
주니어부터 시니어까지 상세한 답변이 포함된 IT 면접 질문 라이브러리.
후원하기