[React] Conditional Rendering

Conditional Rendering

- 조건에 따른 렌더링(조건부 렌더링)
- 어떠한 조건에 따라서 렌더링이 달라지는 것
- 예) Ture이면 버튼을 보여주고 False이면 버튼을 가린다.

만약 로그인됐으면 유저를 환영한다는 컴포넌트를 반환하고, 그렇지 않으면 게스트를 환영한다는 컴포넌트를 반환

 

 

Truthy, Falsy

- true는 아닌데 true로 여겨지는 값
- false는 아니지만 false로 여겨지는 값

truthy와 falsy의 예

 

Element Variables

- 렌더링 해야하는 컴포넌트를 변수처럼 사용해야 할 때

button이라는 변수에 컴포넌트를 집어넣어서 리턴하는 방식

 

Inline Condition

- 코드를 별도로 분리하지 않고, 조건문을 코드 안에 집어넣음

 

 

Inline If

- If문의 경우 && 연산자를 사용
- true && expression 첫번째 조건문이 true라서 두번째 expression 문도 평가함
- false && expression 첫번째 조건문이 false면 두번째 expression 문은 굳이 평가하지 않음
- 그래서 위의 결과값은 expression이고 아래의 결과값은 false

읽지않은 메세지 갯수가 0보다 클 경우 해당 태그를 리턴하지 않고, 0보다 작을 경우 해당 태그 리턴

 

Inline If-Else

- ? 연산자를 사용
- 조건에 따라 각기 다른 Element를 렌더링 하고 싶을 때 사용
- condition ? true : false (삼향연산자)

삼향연산자, 로그인되었다면 '로그인'을 반환하고 아니라면 '로그인하지 않은'을 반환

이 역시, 로그인 여부에 따라 반환하는 컴포넌트를 다르게 함

 

 

Component 렌더링 막기

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

경고 메세지가 없다면 null을 반환하고 경고 메세지를 나타나게 하지 않음

showWarning의 값에 따라 경고 메세지를 감추거나 보이게 할 수 있음

 

 

 

 

 

실습 : 로그인 여부를 나타내는 툴바 만들기

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

 

툴바 컴포넌트를 만든다. 로그인 여부에 따라 환영 인사를 보여주고, 로그인, 로그아웃 버튼을 보여주는 방식이다.

 

 

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

// useState 훅을 이용해 사용자의 로그인여부를 자체적으로 관리
function LandingPage(props) {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

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

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

    // Toolbar 컴포넌트에 전달
    return (
        <div>
            <Toolbar
                isLoggedIn={isLoggedIn}
                onClickLogin={onClickLogin}
                onClickLogout={onClickLogout}
            />
            <div style={{ padding: 16 }}>리액트 공부 같이해요!</div>
        </div>
    );
}

export default LandingPage;

useState 훅을 이용해 사용자의 로그인 여부를 저장한다. 역시 처음에는 false가 초기값이다.  누르면 로그인 여부를 바꿔주는 onClickLogin과 onClickLogout을 Toolbar 컴포넌트에 전달하고, 로그인 여부가 저장되어 있는 isLoggedIn 역시 전달한다. 전달 받은 값들을 위의 Toolbar 컴포넌트에서 활용하면 된다.

 

 

 

 

로그인 버튼을 누르면 환영 메세지가 뜨고, 로그아웃 버튼을 반환한다. 로그아웃 버튼을 누르면 원래대로 돌아가게 된다.