[ React ] 시작하기 : 빠르게 시작하기(조건부 렌더링)

React에서 조건문을 작성하는 데에는 특별한 문법이 필요 없습니다.

일반적인 자바스크립트 코드를 작성할 때 사용하는 것과 동일한 방법을 사용합니다.

예를 들어 if문을 사용하여 조건부로 JSX를 포함할 수 있습니다.

let content;
if (isLoggedIn) {
    content = <AdminPanel />;
} else {
    content = <LoginForm />;
}
return (
    <div>
        {content}
    </div>
);

더욱 간결한 코드를 원한다면 조건부 삼항 연산자를 사용할 수 있습니다.

이것은 if문과 달리 JSX 내부에서 동작합니다.

<div>
    {isLoggedIn ? (
        <AdminPanel />
    ) : (
        <LoginForm />
    )}
</div>

else 분기가 필요하지 않으면 더 짧은 && 연산자를 사용할 수도 있습니다.

<div>
    {isLoggedIn && <AdminPanel />}
</div>

이러한 접근 방식은 어트리뷰트를 조건부로 지정할 때도 동작합니다.

이러한 자바스크립트 문법에 익숙하지 않다면 항상 if...else 를 사용하는 것으로 시작할 수 있습니다.