리액트에서 사용하는 조건부 렌더링과 리스트 렌더링에 대해서 알아보겠습니다.

조건부 렌더링

기본적인 사용 형태

function Item({name, isPacked}) {
    if (isPacked) {
        return <li className="item">{name} Checked!</li>;
    }
    return <li className="item">{name}</li>;
}

export default function PackingList() {
    return (
        <section>
            <h1>Sally Ride's Packing List</h1>
            <ul>
                <Item
                    isPacked={true}
                    name="Space suit"
                />
                <Item
                    isPacked={true}
                    name="Helmet with a golden leaf"
                />
                <Item
                    isPacked={false}
                    name="Photo of Tam"
                />
            </ul>
        </section>
    );
}

props로 boolean 데이터를 받아 체크 표시 여부를 결정하는 소스입니다.
이 소스가 문제는 없지만 중복 소스로 인해 유지보수가 어렵습니다.

null의 활용

if (isPacked) {
    return null;
}
return <li className="item">{name}</li>;

null을 반환하여 아무것도 표시하지 않을수도 있습니다.

삼항연산자 활용

return (
    <li className="item">
        {isPacked ? name + 'Checked' : name}
    </li>
);

삼항연산자를 활용해 쉽게 표현 할 수 있습니다.

return (
    <li className="item">
        {name} {isPacked && 'Checked'}
    </li>
);

AND 연산자라도 표시 할 수 있습니다.

변수 할당 활용

function Item({name, isPacked}) {
    let itemContent = name;
    if (isPacked) {
        itemContent = name + "Checked";
    }
    return (
        <li className="item">
            {itemContent}
        </li>
    );
}

export default function PackingList() {
    return (
        <section>
            <h1>Sally Ride's Packing List</h1>
            <ul>
                <Item
                    isPacked={true}
                    name="Space suit"
                />
                <Item
                    isPacked={true}
                    name="Helmet with a golden leaf"
                />
                <Item
                    isPacked={false}
                    name="Photo of Tam"
                />
            </ul>
        </section>
    );
}