[ReactJS] Conditional Rendering

Conditional Rendering

조건에 따른 렌더링(조건부 렌더링)이라고 해석할 수 있다. 여기에서의 조건은 프로그래밍에서 일반적으로 사용하는 조건문 정도로 생각하면 된다.

function UserGreeting(props) {
	return <h1>Welcome back!</h1>;
    
function GuestGreeting(props) {
	return <h1>Sign in!</h1>
}

이러한 코드를 예시로 들어보자. 여기서 게스트와 유저를 구분지어 return 값을 반환해야 할 필요가 있다.

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;

    if (isLoggedIn) {
        return <UserGreeting />;
    }
    return <GuestGreeting />;
}

위와 같이 조건에 따라 다른 렌더링을 진행하는 것을 조건부 렌더링이라고 한다.

Truthy, Falsy

// truthy
true
{} (empty object)
[] (empty array)
42 (number, not zero)
"0", "false" (string, not empty)

// falsy
false
0, -0 (zero, minus zero)
0n (BigInt zero)
'', "", `` (empty string)
null
undefined
NaN (not a number)

Element Variables

React의 Element를 변수처럼 다루는 방법이다.

button = <LogoutButton onClick = {handleLogoutClick} />;

실제로는 button을 리턴하면 컴포넌트로 생성된 element 형태로 렌더링된다.

Inline Conditions

unreadMessages.length > 0 && // 조건문이 참이라면 뒤의 component 렌더링
    <h2>
        현재 {unreadMessages.length}개의 읽지 않은 메시지가 있습니다.
    </h2>

조건문을 코드 안에 집어넣는다는 의미이다. Inline If는 '&&' 연산자를 사용하는데, 위의 경우처럼 앞의 조건이 참이면 뒤의 값이 결과값이 됨으로 렌더링 진행되는 성질을 이용하는 것이다. Inline If-Else는 '?' 연산자를 사용하는데, condition ? true : false 형태로 사용된다.

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

Component의 렌더링을 막는 방법

Null을 리턴하면 된다. 다음은 warning이 true라면 아무것도 출력하지 않는 형태의 소스코드이다.

function WarningBanner(props) {
    if (!props.warning) {
        return null;
    }
    return (
        <div>경고!!</div>
    )
}

---

< Source />

Toolbar.jsx

import React from "react";

const styles = {
    wrapper: {
        padding: 16,
        display: "flex",
        flexDirection: "row",
        borderBottom: "1px solid grey"
    },
    greeting: {
        marginRight: 8,
    }
}

function Toolbar(props) {
    const {isLoggedIn, onClickLogin, onClickLogout} = props;

    return (
        <div style = {styles.wrapper}>
            {isLoggedIn && <span style={styles.greeting}>환영합니다!</span>}
            
            {isLoggedIn ? (
                <button onClick={onClickLogout}>로그아웃</button>
            ) : (
                <button onClick={onClickLogin}>로그인</button>
            )}
        </div>
    )
}

export default Toolbar;

LandingPage.jsx

import React, { useState } from "react";
import Toolbar from "./Toolbar";

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

    const onClickLogin = () => {
        setIsLoggedIn(true);
    }
    const onClickLogout = () => {
        setIsLoggedIn(false);
    }

    return (
        <div>
            <Toolbar
                isLoggedIn = {isLoggedIn}
                onClickLogin = {onClickLogin}
                onClickLogout = {onClickLogout}
            />
        </div>
    )
}

export default LandingPage;

※ 본 게시글은 소플님의 강의 영상을 참고하여 작성되었습니다. 개인적인 공부 목적으로 사용하고 있고, 문제 시 비공개 전환하도록 하겠습니다.