11. 조건부 렌더링 (Conditional Rendering)

[스나이퍼팩토리] 한컴AI - AI개발자 교육 React.js 11차시: 조건부 렌더링 (Conditional Rendering)

---

📌 학습 목표

✅ **조건부 렌더링(Conditional Rendering)**의 개념을 깊이 이해한다.
✅ JSX에서 if 문, 삼항 연산자(? :), 논리 연산자(&&, ||) 등을 활용하여 다양한 방법으로 조건부 렌더링을 구현한다.
✅ 실제 React 컴포넌트에서 조건부 렌더링을 적용하여 동적인 UI를 만들어 본다.
✅ 불필요한 렌더링을 방지하는 최적화 기법을 학습하고 적용한다.
✅ 조건부 렌더링을 다른 React 기능 (useState, useEffect, React.lazy, Suspense 등)과 함께 활용하는 방법을 익힌다.

---

📚 학습 내용

1. 조건부 렌더링이란?

• 조건부 렌더링(Conditional Rendering) 은 특정 조건에 따라 UI를 다르게 렌더링하는 기법이다.
• React에서는 동적인 UI를 구현할 때 필수적으로 사용되며, 다양한 조건을 기반으로 다른 요소를 표시하거나 숨길 수 있다.
• 예를 들어, 로그인 상태에 따라 다른 화면을 보여주는 기능을 구현할 수 있다.
• JavaScript에서 조건문을 사용하듯이, React에서는 JSX에서 조건을 사용하여 특정 UI를 결정한다.

---

2. 조건부 렌더링의 다양한 방법

🔹 1) if 문을 사용한 조건부 렌더링

function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign in.</h1>;
}

• if 문을 활용하여 조건에 따라 다른 UI를 반환할 수 있다.
• JSX 외부에서 조건을 체크한 후, JSX 내에서 필요한 요소를 반환하는 방식이다.
• 조건이 복잡할 경우, 코드 가독성이 좋다.
• 단점: JSX 내부에서 if 문을 직접 사용할 수 없고, 반드시 JSX 밖에서 조건을 처리해야 한다.

🔹 2) if-else 문을 활용한 조건부 렌더링

function UserStatus(props) {
  if (props.isLoggedIn) {
    return <p>Welcome, {props.username}!</p>;
  } else {
    return <p>Please log in to continue.</p>;
  }
}

• 두 가지 이상의 조건을 처리할 때 유용하다.
• JSX 외부에서 조건을 평가하여 적절한 UI를 반환할 수 있다.
• 코드 가독성이 좋고, 복잡한 조건을 명확하게 표현할 수 있다.

---

3. JSX 내부에서 조건부 렌더링 구현하기

🔹 1) 삼항 연산자(? :)를 사용한 조건부 렌더링

function Greeting(props) {
  return <h1>{props.isLoggedIn ? "Welcome back!" : "Please sign in"}</h1>;
}

• 한 줄로 간결하게 조건부 렌더링을 구현할 수 있다.
• 간단한 조건문을 표현하는 데 적합하지만, 복잡한 조건에서는 가독성이 떨어질 수 있다.
• 단점: 중첩된 삼항 연산자는 코드 가독성을 해칠 수 있음.

function StatusMessage({ isLoggedIn, hasError }) {
  return (
    <p>
      {hasError
        ? "Something went wrong"
        : isLoggedIn
        ? "Welcome back!"
        : "Please log in"}
    </p>
  );
}

• 위와 같이 삼항 연산자가 중첩될 경우 if-else 문을 사용하는 것이 가독성이 더 좋을 수 있다.

🔹 2) 논리 연산자(&&)를 사용한 조건부 렌더링

function Notifications(props) {
  return (
    <div>
      {props.unreadMessages.length > 0 && (
        <h2>You have {props.unreadMessages.length} unread messages.</h2>
      )}
    </div>
  );
}

• && 연산자를 사용하면 조건이 참일 경우에만 특정 요소를 렌더링할 수 있다.
• falsy 값(예: false, 0, null, undefined, "")이면 아무것도 렌더링되지 않는다.

🔹 3) 논리 연산자(||)를 사용하여 기본값 설정

function Welcome(props) {
  return <h1>Hello, {props.name || "Guest"}!</h1>;
}

• || 연산자를 활용하면 props 값이 없을 경우 기본값을 설정할 수 있다.

---

4. 조건부 렌더링의 활용 사례

✅ 1) 로그인 상태에 따른 UI 변경

function Header(props) {
  return (
    <header>
      {props.isLoggedIn ? (
        <UserMenu username={props.username} />
      ) : (
        <LoginButton />
      )}
    </header>
  );
}

• 로그인 여부에 따라 다른 컴포넌트를 렌더링하는 예제이다.

✅ 2) 데이터 로딩 상태 표시

function DataList(props) {
  if (props.isLoading) {
    return <LoadingSpinner />;
  }
  if (props.error) {
    return <ErrorMessage message={props.error} />;
  }
  return (
    <ul>
      {props.items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

• 데이터를 불러오는 동안 로딩 스피너를 보여주거나, 에러 메시지를 표시하는 예제이다.

---

💡 추가로 알면 좋은 사항

🔹 조건부 렌더링 최적화

• 불필요한 렌더링 방지
  • 조건부 렌더링을 사용할 때, **React.memo()**와 같은 최적화 기법을 활용하면 성능을 개선할 수 있다.

const ExpensiveComponent = React.memo(({ isVisible }) => {
  console.log("Rendering Expensive Component");
  return isVisible ? <div>Expensive Component</div> : null;
});

• React.memo()를 사용하면 Props가 변경되지 않는 한 다시 렌더링되지 않도록 최적화할 수 있다.

🔹 Suspense를 활용한 비동기 렌더링

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

• 비동기적으로 데이터를 로드할 때 Suspense를 사용하면 렌더링 성능을 향상시킬 수 있다.

---

🔎 학습 회고

✅ 조건부 렌더링을 활용하면 동적인 UI를 쉽게 구현할 수 있다.
✅ if 문, 삼항 연산자, 논리 연산자(&&, ||) 등을 적절하게 활용해야 한다.
✅ 불필요한 렌더링을 방지하는 방법(React.memo(), Suspense)을 알게 되었다.
✅ 앞으로 Context API 및 Redux와 연계하여 더 복잡한 상태 관리를 해보고 싶다.