&&로 보여주기
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨. 42개 중 34번째.
조건이 참일 때 무언가를 표시하고 싶을 뿐이라면 else가 필요 없는 경우가 많습니다. && 트릭으로 표시하거나 아무것도 표시하지 않을 수 있습니다.
{unread > 0 && <span>You have {unread} new messages</span>}작동 방식: &&는 왼쪽이 참이면 오른쪽 값을 반환하고, React가 이를 렌더링합니다. 왼쪽이 거짓이면 아무것도 렌더링되지 않습니다. 왼쪽에 불리언 값이 있으면 : null을 잘라 낸 삼항 연산자와 같습니다.
{cond ? <X /> : null} // 다음과 동일
{cond && <X />}그래서 이 예제에서는 unread > 0인지 확인합니다. {unread && <span>...</span>}에서 unread가 0이면 &&는 0을 반환하고 React는 이를 페이지에 렌더링합니다.
챌린지
쉬움읽을 내용이 있을 때만 받은 편지함 배지를 표시하세요. 컴포넌트에는 unread가 정의되어 있습니다.
&&를 사용하여unread가 0보다 클 때만id="badge"인<span>을 렌더링하고3 new messages텍스트를 표시하세요(숫자는 변수에서 가져오세요!).
직접 해보기
<!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>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.