[React] Conditional Rendering

이 글은 리액트 공식문서(https://react.dev)를 보며 작성되었습니다.

Conditional Rendering

props와 if문을 이용하여 conditional rendering을 해보자.

import { JsxElement } from "typescript";
import React from "react";

interface Item { // react ts에서 프로퍼티에 대한 타입을 지정할 때는 interface를 써도 되고, type을 써도 되지만 프로젝트 내에서 둘 중 하나로
    name:string,
    isPacked:boolean
}

function ShoppingList({name, isPacked}:Item) : any {
    if(isPacked) {
        return (
            <li> {name} ✅</li>
        );
    } else {
        return (
            <li>{name} </li>
        );
    }

}


export default function List() {
    return (
        <div id="shopping-list">
            <ShoppingList name="사과" isPacked={true}/>
            <ShoppingList name="딸기" isPacked={true}/>
            <ShoppingList name="배" isPacked={false}/>
        </div>
    );
}

결과:

Conditionally returning nothing with null

null을 리턴함으로써 아무 것도 렌더링하지 않을 수도 있다.

import { JsxElement } from "typescript";
import React from "react";

interface Item { // react ts에서 프로퍼티에 대한 타입을 지정할 때는 interface를 써도 되고, type을 써도 되지만 프로젝트 내에서 둘 중 하나로
    name:string,
    isPacked:boolean
}

function ShoppingList({name, isPacked}:Item) : any {
    if(isPacked) {
        return (
            // <li> {name} ✅</li>
            null
        );
    } else {
        return (
            <li>{name} </li>
        );
    }

}


export default function List() {
    return (
        <div id="shopping-list">
            <ShoppingList name="사과" isPacked={true}/>
            <ShoppingList name="딸기" isPacked={true}/>
            <ShoppingList name="배" isPacked={false}/>
        </div>
    );
}