
조건부 렌더링 정리 (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>
);
}
정리 ✍️
이 방식은 조건이 늘어날수록 가장 확장성이 좋다고 느꼈다.
- 새로운 음료 추가 시 로직 수정 없이 데이터만 추가하면 된다
- 조건 분기가 데이터 구조로 치환되어 더 선언적으로 보였다 🧠
🔖챌린지 정리하며 느낀 점
- ? : 는 간단한 분기에 강하지만 남용하면 가독성이 급격히 나빠졌다
- && 는 “있으면 그린다”는 의미 표현에 가장 적합했다
- 조건이 늘어날수록 데이터 구조로 분리하는 방식이 가장 확장성이 좋았다
조건부 렌더링에는 정답은 없지만,
언제 어떤 방식을 쓰는지가 더 중요하다는 점을 정리할 수 있었다 😊💡
'Frontend > React' 카테고리의 다른 글
| [React] 이벤트에 응답하기 (이벤트 핸들러와 전파 이해하기) (0) | 2026.02.06 |
|---|---|
| [React] 리스트 렌더링과 key의 역할 정리 (0) | 2026.02.05 |
| Tanstack Query 캐싱 메커니즘 이해하기 (1) | 2026.01.20 |
| Zustand 미들웨어를 정리하며: immer, subscribeWithSelector, persist, devtools (0) | 2025.12.17 |
| Zustand combine 미들웨어, 처음엔 안 와닿았던 이유 (0) | 2025.12.15 |