Conditional Rendering

Conditional Rendering이란?

조건에 따라 다른 컴포넌트나 UI 요소를 렌더링하는 것

ex) True -> ShowButton() / False -> HideButton()

 

예제 코드

function UserGreeting(props) {
    return <h1>다시 오셨군요!</h1>;
}

function GuestGreeting(props) {
    return <h1>회원가입을 해주세요.</h1>;
}

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

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

 

---

Javascript Truthy와 Falsy

Truthy : True는 아니지만 True로 여겨지는 값

Falsy : False는 아니지만 False로 여기지는 값

 

대표적인 Truthy와 Falsy 값

Truthy	Falsy
true	false
{} (empty object)	0, -0 (zero, minus zero)
[] (empty array)	0n (Bigint zero)
42 (number, not zero)	'', "", `` (empty string)
"0", "false" (string, not empty)	null
	undefined
	NaN ( not a number )

---

Element Variables

리액트의 엘리먼트를 변수처럼 다루는 방법

 

예제 코드

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

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

// ==================================================

import { useState } from "react";

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

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

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

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

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

// isLoggedIn 값에 따라 버튼이라는 변수의 컴포넌트를 대입
    let button;
    if (isLoggedIn) {
        button = <LogoutButton onClick={handleLogoutClick} />;
    } else {
        button = <LoginButton onClick={handleLoginClick} />;
    }

    return (
        <div>
            <Greeting isLoggedIn={isLoggedIn} />
            {button} 
            // 대입 변수를 return에 넣어 실제로 컴포넌트가 렌더링
            // 컴포넌트로 부터 생성된 리액트 엘리먼트
        </div>
    )
}

---

Inline Condition

조건문을 코드 안에 집어넣는 것

 

Short Circuit (단축평가)
true && expression -> expression
false && expression -> false

 

Inline If

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

    return (
        <div>
            <h1>안녕하세요!</h1>
            // length 비교로 h2태그 부분의 렌더링 여부가 결정
            {unreadMessages.length > 0 &&
                <h2>
                    현재 {unreadMessages.length}개의 읽지 않은 메시지가 있습니다.
                </h2>
            }
        </div>
    )
}

// && 연산자 사용 시 조건문에 false expression을 사용하면
// 뒤에 나오는 expression을 평가되지 않으나 false expression의 결과값은 그대로 리턴됨
// 아래 예제의 결과값은
// <div>0</div> 가 됨
function Counter(props) {
    const count = 0;

    return (
        <div>
            {count && <h1>현재 카운트: {count}</h1>}
        </div>  
    );
}

 

Inline If-Else

조건문의 값에 따라 다른 엘리먼트를 보여줄때 사용하며, 삼항 연산자 사용

condition ? true : false

 

예제 코드

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

// 엘리먼트 예제

import { useState } from "react";

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

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

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

    return (
        <div>
            <Greeting isLoggedIn={isLoggedIn} />
            {isLoggedIn
                ? <LogoutButton onClick={handleLogoutClick} />
                : <LoginButton onClick={handleLoginClick} />
            }
        </div>
    )
}

 

Component 렌더링 막기

null을 리턴하면 렌더링되지 않음

※class 컴포넌트의 렌더 함수에서 null을 리턴하는 것은 컴포넌트의 생명주기 함수에 영향을 주지 않음 ※
ex) componentDidUpdate 함수는 여전히 호출

 

 

예제 코드

// warning 시에만 출력
function WarningBanner(props) {
    if (!props.warning) {
        return null;
    }

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

// 실제 warningBanner 예제
import { useState } from "react";

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

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

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

---

Referenced By

인프런 - 처음 만난 리액트(React)

[지금 무료] 처음 만난 리액트(React) | Inje Lee (소플) - 인프런

https://ko.legacy.reactjs.org/docs/conditional-rendering.html

조건부 렌더링 – React