[React] React.js 강좌 7. 조건부 렌더링 (Conditional Rendering)

frontend/react

[React] React.js 강좌 7. 조건부 렌더링 (Conditional Rendering)

mirabo01 2025. 11. 11. 10:56

1. 조건부 렌더링이란?

리액트에서는 상황에 따라 화면에 다른 UI를 보여주는 것을 조건부 렌더링이라고 합니다.
예를 들어 로그인 여부, 데이터 존재 유무, 버튼 클릭 상태에 따라
서로 다른 화면을 보여줘야 할 때가 많죠.

HTML에서는 보통 if 문이나 display:none 같은 CSS 조작을 사용했지만,
리액트에서는 JSX 내부에서 조건문을 활용합니다.

function App() {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn ? <h1>환영합니다!</h1> : <h1>로그인이 필요합니다.</h1>}
    </div>
  );
}

여기서 {}는 JSX 내부에서 자바스크립트 표현식을 사용할 수 있는 영역입니다.
따라서 삼항연산자를 통해 조건에 따라 다른 엘리먼트를 반환할 수 있습니다.

2. 삼항 연산자 (? :) 활용하기

리액트에서 가장 자주 사용하는 조건부 렌더링 방식은 삼항연산자입니다.
예를 들어, 특정 상태에 따라 버튼의 문구를 다르게 표시할 수 있습니다.

function LoginButton({ isLoggedIn }) {
  return (
    <button>
      {isLoggedIn ? '로그아웃' : '로그인'}
    </button>
  );
}

isLoggedIn이 true면 “로그아웃” 버튼이,
false면 “로그인” 버튼이 표시됩니다.

이 방식은 간결하고 직관적이지만,
여러 조건이 중첩되면 가독성이 떨어질 수 있습니다.
그럴 땐 다른 방법을 사용합니다.

3. 논리 연산자 &&를 이용한 렌더링

특정 조건이 true일 때만 요소를 보여주고 싶다면 && 연산자를 사용할 수 있습니다.

function Notification({ count }) {
  return (
    <div>
      <h3>알림</h3>
      {count > 0 && <p>{count}개의 새 알림이 있습니다.</p>}
    </div>
  );
}

count > 0이 참일 때만 <p> 태그가 렌더링되고,
거짓이면 아무것도 표시되지 않습니다.

Tip:
JSX에서는 false, null, undefined를 반환하면 아무것도 렌더링되지 않습니다.
그래서 && 조건은 “조건이 참이면 이걸 보여줘라” 형태로 자주 사용됩니다.

4. if문으로 조건 나누기

JSX 내부에서는 if문을 직접 사용할 수 없습니다.
하지만 조건에 따라 다른 JSX를 변수에 담아 반환하면 됩니다.

function Greeting({ isMorning }) {
  let message;

  if (isMorning) {
    message = <h1>좋은 아침입니다!</h1>;
  } else {
    message = <h1>좋은 하루 되세요!</h1>;
  }

  return <div>{message}</div>;
}

이 방식은 조건이 여러 개일 때 더 깔끔하고 가독성이 좋습니다.

5. 조건부 클래스(className) 지정하기

상태에 따라 스타일을 바꾸는 것도 조건부 렌더링의 한 예입니다.
className에 조건을 직접 넣을 수 있습니다.

function TodoItem({ done, text }) {
  return (
    <li className={done ? 'completed' : 'pending'}>
      {text}
    </li>
  );
}

done이 true면 "completed" 클래스가 적용되고,
그렇지 않으면 "pending" 클래스가 적용됩니다.

이 방식을 응용하면,
버튼 색상, 아이콘, 애니메이션 등을 조건에 따라 다르게 표현할 수 있습니다.

6. 즉시 반환(return)으로 렌더링 제어하기

때로는 조건에 따라 컴포넌트 자체를 렌더링하지 않아야 하는 경우가 있습니다.
그럴 때는 조건문 안에서 return null을 사용하면 됩니다.

function Alert({ visible, message }) {
  if (!visible) return null; // 표시하지 않음
  return <div className="alert">{message}</div>;
}

리액트에서 null을 반환하면 아무것도 렌더링되지 않습니다.
이 기법은 모달, 로딩창, 경고창 등에서 자주 사용됩니다.

7. 실전 예제 – 로그인 상태에 따른 UI 전환

지금까지 배운 내용을 종합해
로그인 상태에 따라 화면을 다르게 표시해보겠습니다.

import React, { useState } from 'react';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  function handleLogin() {
    setIsLoggedIn(true);
  }

  function handleLogout() {
    setIsLoggedIn(false);
  }

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      {isLoggedIn ? (
        <>
          <h1>환영합니다!</h1>
          <button onClick={handleLogout}>로그아웃</button>
        </>
      ) : (
        <>
          <h1>로그인이 필요합니다.</h1>
          <button onClick={handleLogin}>로그인</button>
        </>
      )}
    </div>
  );
}

이 예제는 삼항 연산자, Fragment, 상태 제어가 모두 결합된
가장 기본적인 조건부 렌더링 패턴입니다.

8. 조건부 렌더링 시 주의할 점

JSX 안에서 if문을 직접 쓰면 오류가 발생합니다.
→ 대신 변수나 삼항연산자, 논리연산자를 활용해야 합니다.
조건이 많아질 경우 컴포넌트를 분리해서 관리하는 것이 좋습니다.
→ LoginView, LogoutView처럼 나누면 코드가 깔끔해집니다.
CSS 조건부 렌더링을 함께 활용하면 훨씬 자연스러운 UI를 만들 수 있습니다.

9. 마무리

삼항 연산자(? :)로 조건에 따라 다른 UI를 표현한다.
&& 연산자는 “조건이 참일 때만 렌더링”할 때 유용하다.
return null은 “아예 렌더링하지 않음”을 의미한다.
조건이 많아지면 컴포넌트 분리가 필수다.

다음 글에서는 리액트의 **폼(Form)과 입력값 제어(Controlled Components)**를 다뤄보겠습니다.
사용자 입력을 어떻게 관리하고 검증하는지 단계별로 살펴보겠습니다.