조건부 렌더링 완전 가이드 – if문이 아닌 방법

조건부 렌더링 완전 가이드 – if문이 아닌 방법

---

React에서 UI는 **상태(state)**에 따라 유동적으로 변화해야 합니다.
이때 가장 자주 사용하는 기법이 바로 조건부 렌더링입니다.
하지만 if문만으로는 유연한 UI를 만들기 어렵고,
React에서는 더 깔끔하고 선언적인 방법들이 존재합니다.

이번 글에서는 React에서 조건부 렌더링을 구현하는 다양한 방법을
실전 예제와 함께 총정리합니다.

---

✅ 기본 개념 – JSX는 JavaScript 표현식이다

JSX 내부에서는 if 문을 직접 쓸 수 없습니다.
→ 대신 삼항 연산자, &&, 조건 함수 등을 사용합니다.

---

🔹 1. 삼항 연산자 (? :) – 가장 흔한 조건 분기

{isLoggedIn ? <p>환영합니다!</p> : <p>로그인 해주세요.</p>}

✅ 사용처: "A 또는 B"처럼 명확하게 분기할 때

---

🔹 2. AND 연산자 (&&) – 조건이 참일 때만 렌더링

{unreadMessages.length > 0 && <p>📩 새 메시지가 있습니다</p>}

✅ 사용처: "있으면 보여줘", "조건을 만족할 때만 렌더링"

⚠️ false일 경우 아무것도 렌더링되지 않지만,
0 같은 falsy 값은 화면에 노출될 수 있으니 주의!

{0 && <p>렌더링됩니다!</p>}  // 결과: 0 (보임)

→ 해결법: Boolean()으로 강제 변환하거나 삼항 사용

---

🔹 3. 변수로 조건 분기하기

 

let content;

if (loading) {
  content = <p>로딩 중...</p>;
} else {
  content = <p>완료되었습니다!</p>;
}

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

✅ 복잡한 조건일수록 JSX 바깥에서 분기하는 것이 깔끔합니다.

---

🔹 4. early return (조건부 단락 렌더링)

if (!user) return null;

return <h1>안녕하세요, {user.name}님!</h1>;

✅ 컴포넌트 최상단에서 조건을 걸고, 필요 없으면 바로 null 반환
→ 렌더링 자체를 막는 가장 깔끔한 방법

---

🧠 렌더링되지 않도록 해야 하는 경우

function Warning({ visible }) {
  if (!visible) return null;
  return <p style={{ color: 'red' }}>⚠️ 경고 메시지</p>;
}

✅ 상태에 따라 컴포넌트를 아예 보여주지 않으려면 null 반환!

---

❌ 잘못된 조건부 렌더링

{isDark && <p>다크모드</p> || <p>라이트모드</p>} // 🚨 위험한 코드

→ isDark === false일 때, 라이트모드가 항상 보여짐

정석은 삼항 연산자:

{isDark ? <p>다크모드</p> : <p>라이트모드</p>}

---

💡 고급 팁: 조건부 클래스 적용

<button className={isActive ? "btn active" : "btn"}>클릭</button>

또는 Tailwind CSS + clsx 라이브러리 사용:

import clsx from 'clsx';

<button className={clsx('btn', isActive && 'active')}>클릭</button>

---

🧠 오늘의 요약

방식 설명 사용처

삼항 연산자	A 또는 B를 나눌 때	로그인 여부 등
&&	조건을 만족할 때만 렌더링	알림, 경고 표시
변수로 처리	복잡한 조건을 JSX 밖에서 처리	코드 가독성 개선
early return	조건 불충족 시 렌더링 자체 생략	성능 + 명확한 구조

---

🧪 실습 과제

1. isLoggedIn 상태에 따라 다른 문구를 출력하는 컴포넌트를 만들어보세요.
2. 메시지 목록이 비어있을 때 아무것도 렌더링하지 않도록 && 연산자 활용해보세요.
3. 경고 컴포넌트를 만들어 visible이 false일 때 렌더링을 막아보세요.

---

📌 다음 글 예고

👉 React로 폼(Form) 다루기 – 입력 관리 완벽 가이드

• Controlled vs Uncontrolled 입력
• 여러 입력 필드 관리 패턴
• onChange, onSubmit, 초기값 설정 실전 예제

---

 

React 조건부 렌더링, React 삼항 연산자, React && 렌더링, 컴포넌트 조건 분기, JSX 조건 처리, React null 반환, React early return, 상태에 따른 UI, React 렌더링 팁, React 실전 예제