[React] 조건부 렌더링 제대로 정리하기 (if, ? :, &&, null)

 

조건부 렌더링 정리 (React)

React에서 조건에 따라 JSX를 렌더링하는 방법은 여러 가지가 있다.
공식 문서에서는 상황에 맞게 다양한 패턴을 사용하라고 권장하고 있으며, 각 방식마다 쓰임새가 명확히 다르다 ✍️

아래는 실제로 사용하면서 정리한 조건부 렌더링 선택 기준이다.

---

1️⃣ 조건부로 JSX 반환하기 (if / return)

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✅</li>;
  }
  return <li className="item">{name}</li>;
}

가장 직관적인 방식이다.
조건에 따라 완전히 다른 JSX를 반환해야 할 때 사용하기 좋았다.

• 조건 분기가 명확할 때 👍
• JSX 구조가 크게 달라질 때 👍
• early return 패턴으로 읽기 쉬웠다

---

2️⃣ 조건부로 null 반환하기

function Item({ name, isPacked }) {
  if (isPacked) {
    return null;
  }
  return <li className="item">{name}</li>;
}

컴포넌트를 아예 렌더링하지 않아야 할 때 유용했다.

• 특정 조건에서 UI 자체를 숨기고 싶을 때 사용했다
• React는 null을 렌더링하지 않는다 ❌

---

3️⃣ 삼항 조건 연산자 (? :)

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? name + " ✅" : name}
    </li>
  );
}

중복되는 JSX를 줄이고 싶을 때 효과적이었다.

• 조건에 따른 값만 다른 경우 적합했다
• JSX 구조는 같고, 일부 표현만 달라질 때 좋았다
• 조건이 복잡해지면 가독성이 급격히 떨어졌다 ⚠️

---

4️⃣ 논리 AND 연산자 (&&)

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && "✅"}
    </li>
  );
}

조건이 참일 때만 추가 요소를 렌더링할 때 사용했다.

true && "✅"   // "✅"
false && "✅"  // false (React는 렌더링하지 않음)

React는 false, null, undefined를 JSX에서 “구멍”처럼 처리해 아무것도 렌더링하지 않는다.

⚠️ 주의할 점

• 0 && JSX 는 0이 렌더링된다
• boolean 조건이라고 착각하면 버그가 날 수 있다

---

5️⃣ 변수에 조건부 JSX 할당하기

function Item({ name, isPacked }) {
  let itemContent = name;

  if (isPacked) {
    itemContent = name + " ✅";
  }

  return <li className="item">{itemContent}</li>;
}

JSX 안에서 조건이 많아질수록 이 방식이 가장 깔끔했다 ✨

• JSX 가독성을 유지할 수 있었다
• 로직과 마크업을 분리할 수 있었다
• 조건이 2개 이상일 때 특히 유리했다

---

✍️ 조건부 렌더링 선택 기준 정리

실제로 써보며 정리한 기준은 다음과 같았다 👇

• 조건이 단순할 때 → && 또는 ? :
• 조건에 따라 아예 안 그릴 때 → early return 또는 null
• JSX 구조는 같고 값만 다를 때 → ? :
• JSX가 지저분해지기 시작할 때 → 변수로 분리
• 조건 자체가 도메인 로직일 때 → 객체나 함수로 추출

---

🧩 챌린지 도전 1

챌린지 1 of 3: ? :를 사용하여 완료되지 않은 항목의 아이콘 표시하기

isPacked가 true가 아닐 경우, 조건부 연산자(? :)를 사용해 ❌를 렌더링하는 문제였다.

문제 코드

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✅'}
    </li>
  );
}

정답 코드

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked ? "✅" : "❌"}
    </li>
  );
}

 

정리 ✍️

기존 && 방식은 참일 때만 렌더링할 수 있었기 때문에,
거짓일 때 다른 값을 표현하려면 삼항 연산자가 더 적합했다.

• 조건에 따라 둘 중 하나를 반드시 보여줘야 할 때 ? :가 유리했다
• UI 상태가 명확히 나뉘는 경우 가독성이 더 좋았다 ✅

---

🧩 챌린지 도전 2

챌린지 2 of 3: 중요도를 &&로 표시하기

importance가 0이 아닐 때만
(Importance: X) 를 이탤릭체로 렌더링하는 문제였다.

문제 코드

function Item({ name, importance }) {
  return (
    <li className="item">
      {name}
    </li>
  );
}

정답 코드

 

function Item({ name, importance }) {
  return (
    <li className="item">
      {name}
      {importance > 0 && " "}
      {importance > 0 && <i>(Importance: {importance})</i>}
    </li>
  );
}

 

정리 ✍️

&& 연산자는 조건이 참일 때만 JSX를 추가하는 상황에 적합했다.

• 중요도가 있을 때만 부가 정보 표시 👉 && 사용이 자연스러웠다
• false는 React에서 렌더링되지 않기 때문에 별도 처리가 필요 없었다
• 단순한 조건부 “추가 렌더링”에 적합한 패턴이었다 ✨

---

🧩 챌린지 도전 3

챌린지 3 of 3: 여러 ? :를 if로 리팩토링하기

여러 개의 삼항 연산자로 흩어져 있던 조건 로직을
하나의 if 문으로 정리하는 문제였다.

문제 코드

<dd>{name === 'tea' ? 'leaf' : 'bean'}</dd>
<dd>{name === 'tea' ? '15–70 mg/cup' : '80–185 mg/cup'}</dd>
<dd>{name === 'tea' ? '4,000+ years' : '1,000+ years'}</dd>

정답 코드 (if 문) 

function Drink({ name }) {
  let part, caffeine, age;

  if (name === "tea") {
    part = "leaf";
    caffeine = "15–70 mg/cup";
    age = "4,000+ years";
  } else if (name === "coffee") {
    part = "bean";
    caffeine = "80–185 mg/cup";
    age = "1,000+ years";
  }

  return (
    <section>
      <h1>{name}</h1>
      <dl>
        <dt>Part of plant</dt>
        <dd>{part}</dd>
        <dt>Caffeine content</dt>
        <dd>{caffeine}</dd>
        <dt>Age</dt>
        <dd>{age}</dd>
      </dl>
    </section>
  );
}

 

정리 ✍️

조건이 여러 곳에 흩어져 있으면 의미를 한눈에 파악하기 어렵다는 걸 느꼈다.

• 하나의 조건(name)에 따른 값들을 한 번에 묶을 수 있었다
• 로직의 응집도가 높아져 읽기 쉬워졌다 👍

---

💡 추가 개선: 객체로 리팩토링한 방식

const drinks = {
  tea: {
    part: "leaf",
    caffeine: "15–70 mg/cup",
    age: "4,000+ years",
  },
  coffee: {
    part: "bean",
    caffeine: "80–185 mg/cup",
    age: "1,000+ years",
  },
};

function Drink({ name }) {
  const info = drinks[name];

  return (
    <section>
      <h1>{name}</h1>
      <dl>
        <dt>Part of plant</dt>
        <dd>{info.part}</dd>
        <dt>Caffeine content</dt>
        <dd>{info.caffeine}</dd>
        <dt>Age</dt>
        <dd>{info.age}</dd>
      </dl>
    </section>
  );
}

 

정리 ✍️

이 방식은 조건이 늘어날수록 가장 확장성이 좋다고 느꼈다.

• 새로운 음료 추가 시 로직 수정 없이 데이터만 추가하면 된다
• 조건 분기가 데이터 구조로 치환되어 더 선언적으로 보였다 🧠

 

 🔖챌린지 정리하며 느낀 점

• ? : 는 간단한 분기에 강하지만 남용하면 가독성이 급격히 나빠졌다
• && 는 “있으면 그린다”는 의미 표현에 가장 적합했다
• 조건이 늘어날수록 데이터 구조로 분리하는 방식이 가장 확장성이 좋았다

조건부 렌더링에는 정답은 없지만,
언제 어떤 방식을 쓰는지가 더 중요하다는 점을 정리할 수 있었다 😊💡