삼항 연산자 렌더링

Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 33번째.

JSX 중괄호에는 if 문을 넣을 수 없지만, 삼항 연산자는 완벽하게 작성할 수 있으며 화면의 거의 모든 조건별 선택 상황을 처리할 수 있습니다:

{isLoggedIn ? 'Welcome back!' : 'Please log in'}

조건이 먼저 오고, 그 다음은 true일 때의 값, 그 다음은 false일 때의 값입니다. 양쪽 모두 완전한 JSX 엘리먼트가 될 수 있습니다:

{isLoggedIn
    ? <p>Welcome back!</p>
    : <button>Log in</button>}

상태(state)와 결합하면 페이지가 실시간으로 전환됩니다. 불리언(boolean) 값을 전환하면 React가 다른 분기를 다시 렌더링합니다.

챌린지

쉬움

로그인 상태 표시줄을 만드세요.

false로 시작하는 불리언 상태 loggedIn을 추가합니다.
버튼(id="login")은 클릭할 때마다 이 상태를 반전시킵니다.
단락(id="status")은 삼항 연산자를 사용하여 로그인했을 때 Welcome back!을 표시하고, 그렇지 않으면 Please log in을 표시합니다.

직접 해보기

<!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>