React 교재 · 기초 8편

React 조건부 렌더링 — 삼항·&&·null

JSX 안에는 if 문이 못 들어간다. 4가지 패턴으로 같은 효과 + 0 표시 함정.

로그인 버튼과 환영 메시지 두 UI 상태 사이에 게이트 스위치가 있는 일러스트 — 조건부 렌더링 컨셉

4편에서 짚었듯 JSX 안 중괄호는 표현식 만 허용. if·for 같은 문은 못 쓴다. 그런데 화면은 항상 "로그인했으면 X, 아니면 Y" 같은 조건 분기가 필수. React 가 이걸 어떻게 풀까 — 4가지 패턴이 답.

1. 4 패턴 비교 — 언제 무엇을

패턴마다 적합한 경우가 다르다. 한 줄 정리.

패턴	형태	최적 케이스
삼항 연산자	cond ? A : B	A 또는 B 둘 중 하나는 무조건 그릴 때
&& 단축 평가	cond && A	참일 때만 A, 거짓이면 아무것도 안 그림
null 반환	if (!cond) return null;	컴포넌트 전체를 조건부로 렌더 안 함
early return	함수 시작부 if 분기	로딩·에러 상태 등 다중 분기

2. 삼항 — 두 결과 중 하나

function Greeting({ isLoggedIn, user }) {
  return (
    <div>
      {isLoggedIn
        ? <p>안녕, {user.name}님!</p>
        : <a href="/login">로그인</a>
      }
    </div>
  );
}

삼항이 중첩 2번 넘어가면 가독성 무너진다. 삼항은 1단계까지가 실전 규칙. 더 복잡하면 early return 또는 별도 컴포넌트로 분리.

3. && — "있을 때만" 패턴

function Notifications({ unreadCount }) {
  return (
    <header>
      <h1>받은편지함</h1>
      {unreadCount > 0 && (
        <span className="badge">새 메시지 {unreadCount}개</span>
      )}
    </header>
  );
}

JavaScript 의 단축 평가 — 왼쪽이 truthy 면 오른쪽 반환, falsy 면 왼쪽 그대로 반환. true && JSX 면 JSX 가, false && JSX 면 false 가 반환되는데 React 는 false·null·undefined 를 모두 "그리지 않음" 으로 해석.

0 표시 함정 — 가장 흔한 사고

이게 React 개발자가 가장 많이 당하는 버그 중 하나.

function Cart({ items }) {
  return (
    <div>
      {items.length && <p>장바구니 {items.length}개</p>}
      {/* items.length === 0 일 때 화면에 "0" 이 보임 ❌ */}
    </div>
  );
}

이유 — items.length 가 0 이면 0 && JSX = 0 반환. 0 은 falsy 지만 React 가 그리는 falsy 값 중 유일하게 0 만 화면에 표시 (이것도 React 18 의 동작). 해결책 — 명시적 boolean 변환:

{items.length > 0 && <p>...</p>}  // ✅ true/false 만
{!!items.length && <p>...</p>}     // ✅ !!로 boolean 강제
{items.length ? <p>...</p> : null}   // ✅ 삼항 사용

실전 규칙 — && 왼쪽에 boolean 표현식만 두기. length·count 같은 숫자나 str.length 같은 길이가 들어가면 무조건 비교 연산자 (> 0·!== 0) 또는 !! 로 boolean 화.

4. null 반환 + early return — 컴포넌트 전체 분기

조건이 컴포넌트 전체 렌더 여부에 관한 것이면 일찍 return.

function UserProfile({ user, loading, error }) {
  if (loading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
  if (!user) return null;  // 로그아웃 상태 — 아무것도 안 그림

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      {/* ... 본문 ... */}
    </div>
  );
}

이 패턴이 진짜 강력 — 본문 JSX 가 깨끗하게 유지된다. 중첩 삼항으로 같은 걸 짜면 200줄 짜리 괴물이 된다. "if 분기는 함수 시작부, 본문 JSX 는 단일 경로" 가 클린 React 의 핵심 규칙.

왜 일찍 return 인가 — 11편 useEffect 와 14편 useReducer 의 hook 들은 매 렌더마다 같은 순서로 호출되어야 한다. 본문 중간 if 가 hook 호출을 건너뛰면 에러. early return 은 hook 들 다 호출한 후에 해야 안전. 11편에서 다시 강조.

조건부 렌더링 끝. 9편에서는 "여러 항목을 한 번에 그리기" — 배열을 JSX 로 변환하는 .map() 패턴 + key prop 의 진짜 역할. 두 편 합치면 동적 UI 의 99% 가 가능.

React 교재 9편 — 리스트 렌더링 + key prop. .map() 으로 JSX 배열 + key 의 진짜 역할 + index 함정.