&&로 보여주기
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 34번째.
보통은 else가 필요 없습니다. 단지 조건이 참일 때 무언가 표시되기를 원할 뿐입니다. && 트릭은 조건에 따라 보여주거나 아무것도 보여주지 않는 상황을 처리합니다:
{unread > 0 && <span>You have {unread} new messages</span>}작동 방식: &&는 왼쪽이 true일 때 오른쪽을 반환하고, React는 이를 렌더링합니다. 왼쪽이 false이면 아무것도 렌더링되지 않습니다. 이는 : null이 생략된 삼항 연산자와 같습니다:
{cond ? <X /> : null} // 와 동일
{cond && <X />}
챌린지
쉬움읽을 거리가 있을 때만 받은편지함 뱃지를 표시하세요. 컴포넌트가 unread를 정의합니다.
&&를 사용하여,unread가 0보다 클 때만id="badge"와3 new messages텍스트(변수로 숫자를 생성하세요!)를 가진<span>을render하세요.
직접 해보기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.