조건부 렌더링과 리스트

실제 화면은 "로그인했으면 A, 아니면 B" 처럼 상황에 따라 다르게 그려집니다. JSX 안에서 조건과 반복을 다루는 방법을 익혀 봅시다.

학습 목표

• 삼항 연산자와 && 로 조건부 렌더링을 할 수 있다.
• 리스트를 map 으로 그리고 key 를 올바르게 설계할 수 있다.
• fragment로 불필요한 래퍼를 없앨 수 있다.
• 조건에 따라 클래스·스타일을 동적으로 바꿀 수 있다.

삼항 연산자로 분기

JSX의 중괄호 안에는 표현식만 들어가므로 if 문 대신 삼항 연산자를 씁니다.

function Status({ isOnline }) {
  return (
    <p>
      현재 상태: {isOnline ? '🟢 온라인' : '⚪ 오프라인'}
    </p>
  );
}

블록 전체를 갈아끼울 수도 있습니다.

function Page({ user }) {
  return (
    <div>
      {user ? (
        <h1>{user.name}님 환영합니다</h1>
      ) : (
        <a href="/login">로그인 해주세요</a>
      )}
    </div>
  );
}

&& 로 "있을 때만" 그리기

"조건이 참일 때만 보여주고, 거짓이면 아무것도 안 그린다"면 && 가 깔끔합니다.

function Inbox({ unread }) {
  return (
    <div>
      <h2>받은 편지함</h2>
      {unread > 0 && <span className="badge">{unread}</span>}
    </div>
  );
}

⚠️ 주의 — {count && <p>...</p>} 에서 count 가 0 이면 화면에 숫자 0 이 그대로 찍힙니다. 0 은 falsy지만 렌더링되는 값이거든요. {count > 0 && ...} 처럼 불리언으로 만들어 주세요.

리스트와 key 심화

function ProductList({ products }) {
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>
          {p.name} — {p.price.toLocaleString()}원
        </li>
      ))}
    </ul>
  );
}

key 는 React가 "이 항목이 그 항목"임을 알아보는 신분증입니다.

key 선택	추천 여부
고유 ID (item.id)	✅ 가장 좋음
안 바뀌는 고정 목록의 인덱스	△ 제한적으로 OK
순서가 바뀌는 목록의 인덱스	❌ 버그 유발
Math.random()	❌ 매 렌더 새 key → 전체 재생성

비어 있는 경우도 함께 처리하면 좋습니다.

function ProductList({ products }) {
  if (products.length === 0) return <p>상품이 없습니다.</p>;
  return (
    <ul>
      {products.map((p) => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

fragment로 key 주기

리스트 항목이 여러 태그라면 Fragment 에 key 를 줍니다.

import { Fragment } from 'react';

function Glossary({ terms }) {
  return (
    <dl>
      {terms.map((t) => (
        <Fragment key={t.id}>
          <dt>{t.word}</dt>
          <dd>{t.desc}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

동적 클래스와 스타일

조건에 따라 클래스 이름을 바꾸는 패턴입니다.

function Tab({ label, active }) {
  return (
    <button className={active ? 'tab tab--active' : 'tab'}>
      {label}
    </button>
  );
}

여러 조건이 섞이면 템플릿 리터럴이나 배열 join 이 편합니다.

function Alert({ type, big }) {
  const classes = ['alert', `alert--${type}`];
  if (big) classes.push('alert--big');
  return <div className={classes.join(' ')}>알림</div>;
}

인라인 스타일은 객체로 전달하고 속성명은 카멜케이스입니다.

function Bar({ percent }) {
  return (
    <div style={{ width: `${percent}%`, backgroundColor: '#4f46e5' }} />
  );
}

💡 TIP — 클래스 조합이 복잡해지면 clsx 같은 작은 라이브러리를 쓰면 가독성이 좋아집니다.

요약

• JSX 안에서는 if 대신 삼항 연산자나 && 로 분기한다.
• && 왼쪽 값이 0 이면 그대로 출력되니 불리언으로 만든다.
• 리스트는 map + 고유 key. 인덱스 key는 순서가 안 바뀔 때만.
• 동적 클래스는 삼항·배열 join, 인라인 스타일은 카멜케이스 객체로.

연습문제

1. score props가 60 이상이면 "합격", 미만이면 "불합격"을 보여주는 컴포넌트를 삼항 연산자로 작성하세요.
2. errors 배열이 비어 있지 않을 때만 빨간 박스를 보여주도록 && 를 사용하세요. (길이 0 함정에 주의)
3. 사용자 배열 [{id, name, vip}] 를 리스트로 그리되, vip 인 사람만 클래스 row--vip 를 추가하세요.
4. selected 인덱스와 같은 항목에만 active 클래스를 주는 탭 목록을 만들어 보세요.

힌트 — 2번은 errors.length > 0 && ... 형태로. 3번은 className={user.vip ? 'row row--vip' : 'row'}.