조건부 렌더링 — 상황에 따라 다른 UI

이 토픽을 마치면

React에서 조건에 따라 다른 컴포넌트를 보여주는 여러 패턴을 알게 됩니다.

왜 필요한가

로그인 여부에 따라 다른 화면을 보여줘야 합니다. 데이터 로딩 중에는 스피너를, 에러가 나면 에러 메시지를 보여줘야 합니다. 이렇게 조건에 따라 다른 UI를 그리는 것이 조건부 렌더링입니다.

패턴 1: Early Return

jsx

function Dashboard({ user }) {
  if (!user) {
    return <LoginForm />;
  }

  return <UserDashboard user={user} />;
}

함수 초반에 조건을 확인하고 바로 return합니다. 가장 읽기 쉬운 패턴입니다. 복잡한 조건을 JSX 안에 넣지 않아도 됩니다.

패턴 2: 삼항 연산자

jsx

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <UserMenu /> : <LoginButton />}
    </div>
  );
}

JSX 안에서 조건을 쓸 때 삼항 연산자를 씁니다. 두 가지 중 하나를 보여줘야 할 때 적합합니다.

중첩하면 읽기 어려워집니다:

jsx

// 나쁜 예
{isLoading ? <Spinner /> : error ? <Error /> : <Content />}

이럴 때는 early return이나 별도 함수로 분리하세요.

패턴 3: && 연산자

jsx

function Notification({ count }) {
  return (
    <div>
      {count > 0 && <Badge count={count} />}
    </div>
  );
}

보여주거나 안 보여주거나 둘 중 하나일 때 씁니다. 삼항 연산자의 else 부분이 null이면 &&로 줄일 수 있습니다.

주의: 숫자 0은 falsy지만 React가 렌더링합니다.

jsx

// 주의: count가 0이면 화면에 "0" 표시
{count && <Badge />}

// 안전한 방법
{count > 0 && <Badge />}

패턴 4: 변수에 저장

jsx

function StatusMessage({ status }) {
  let message;
  if (status === "loading") message = <Spinner />;
  else if (status === "error") message = <ErrorBanner />;
  else if (status === "empty") message = <EmptyState />;
  else message = <DataTable />;

  return <div className="container">{message}</div>;
}

분기가 3개 이상이면 변수에 저장하는 게 깔끔합니다.

null을 반환하면

jsx

function MaybeTooltip({ show, text }) {
  if (!show) return null;
  return <div className="tooltip">{text}</div>;
}

null을 반환하면 아무것도 렌더링하지 않습니다. 컴포넌트 자체를 숨기고 싶을 때 씁니다.

CSS의 display: none과 다릅니다. null은 DOM에서 아예 사라지고, display: none은 DOM에 남아있지만 보이지 않습니다.

핵심

Early return은 가장 읽기 쉬운 조건부 렌더링 패턴입니다. 삼항 연산자는 두 가지 중 하나를 보여줄 때, **&&**는 보여주거나 안 보여줄 때 씁니다. 분기가 많아지면 변수에 저장하거나 컴포넌트를 분리하세요.