Conditional Rendering

---

프로그램이에서 conditioin은 조건을 의미합니다. 따라서 Conditional Rendering 은 조건부 렌더링으로, 어떠한 조건에 따라서 렌더링이 달라지는 것을 의미합니다.

조건문을 사요할 때 결과가 true일지 false일지를 예상하면서 개발해야 합니다.

truthy와 falsy

// truthy : true는 아니지만 true로 여겨지는 값
true
{} (empty object)
[] (empty array)
42 (number, not zero)
"0", "false" (string, not empty)

// falsy : false는 아니지만 Falsy로 여겨지는 값
false
0, -0 (zero, minus zero)
0n (BigInt zero)
'', "", `` (empty string)
null
undefined
Nan (not a number)

Element Variavles

React의 엘리먼트를 변수처럼 다루는 방법입니다.

Element Variavles 예시 #1

function LoginButton(props) {
    return (
        <button onClick={props.onClick}>
            로그인
        </button>
    );
}

function LogoutButton(props) {
    return (
        <button onClick={props.onClick}>
            로그아웃
        </button>
    );
}

import { useState } from "react";

function LoginControl(props) {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    const handleLoginClick = () => {
        setIsLoggedIn(true);
    }

    const handleLogoutClick = () => {
        setIsLoggedIn(false);
    }

    let button;
    if (isLoggedIn) {
        button = <LogoutButton onClick={handleLogoutClick} />;
    } else {
        button = <LoginButton onClick={handleLoginClick} />;
    }

    return (
        <div>
            <Greeting isLoggedIn={isLoggedIn} />
            {button}
        </div>
    )
}

LoginControl 컴포넌트는 사용자의 로그인 여부에 따라 로그인 버튼과 로그아웃 버튼을 선택적으로 보여줍니다.

조건문에서 isLoggedIn의 값에 따라 버튼이라는 변수에 컴포넌트로부터 생성된 엘리먼트를 대입하고 있습니다. 엘리먼트가 대입된 변수를 return에 넣어 실제로 엘리먼트가 렌더링이 되도록 하고 있습니다.

Inline Conditions

---

조건문을 코드 안에 집어넣는 것을 말합니다.

Inline If

if문을 필요한 곳에 직접 집어 넣어 사용하는 방법입니다. 정확히는 if문과 동일한 효과를 내기 위해 && 라는 논리 연산자를 사용합니다. 로지컬 엔드 연산 이라고 부르기도 하는데, 양쪽에 나오는 조건문이 모두 true인 경우에만 전체 결과가 true가 됩니다.

첫번째 조건문이 true이면 두번째 조건문을 평가하고, 첫번째 조건문이 false면 두번째 조건문은 평가하지 않습니다. 이것을 단축 평가, Short Circuit Evaluation 이라고 합니다.

function Mailbosx(props) {
    const unreadMessages = props.unreadMessages;

    return (
        <div>
            <h1>안녕하세요!</h1>
            {unreadMessages.length > 0 &&
                <h2>
                    현재 {unreadMessages.length}개의 읽지 않은 메시지가 있습니다.
                </h2>
            }
        </div>
    );
}

Inline If-Else

if-else문을 필요한 곳에 직접 넣어서 사용하는 방법입니다. 삼항 연산자로 불리는 ? 연산자를 사용합니다.

function UserStatus(props) {
    return (
        <div>
            이 사용자는 현재 <b>{props.isLoggedIn ? '로그인' : '로그인하지 않은'}</b> 상태입니다.
        </div>
    )
}

Component 렌더링 중지 ?

React에서 특정 컴포넌트를 렌더링하고 싶지 않은 경우 null을 리턴하면 됩니다. 참고로 클래스 컴포넌트의 렌더 함수에서 null을 리턴해도 컴포넌트의 생명주기 함수에 전혀 영향을 미치지 않습니다.

function WarningBanner(props) {
    if (!props.warning) {
        return null;
    }

    return (
        <div>경고!</div>
    );
}

function MainPage(props) {
    const [showWarning, setShowWarning] = useState(false);

    const handleToggleClick = () => {
        setShowWarning(prevShowWarning => !prevShowWarning);
    }

    return (
        <div>
            <WarningBanner warnint={showWarning} />
            <button onClick={handleToggleClick}>
                {showWarning ? '감추기' : '보이기'}
            </button>
        </div>
    )
}