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

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. 조건부 렌더링 시 주의할 점

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

---

9. 마무리

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

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