리스트 렌더링과 조건부 표시

const fruits = ["사과", "바나나", "포도", "딸기"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

// 결과:
// • 사과
// • 바나나
// • 포도
// • 딸기

const products = [
  { id: 1, name: "노트북", price: 1200000 },
  { id: 2, name: "마우스", price: 35000 },
  { id: 3, name: "키보드", price: 89000 },
];

function ProductList() {
  return (
    <ul>
      {products.map(product => (
        // ✅ 고유한 id를 key로 사용
        <li key={product.id}>
          {product.name} — {product.price.toLocaleString()}원
        </li>
      ))}
    </ul>
  );
}

// ❌ index를 key로 쓰면 순서가 바뀔 때 문제!
// <li key={index}> → 삭제/정렬 시 버그 발생 가능

function StatusBadge({ isOnline }) {
  // 1️⃣ 삼항 연산자 — 둘 중 하나를 선택
  return (
    <span className={isOnline ? "online" : "offline"}>
      {isOnline ? "🟢 접속 중" : "⚫ 오프라인"}
    </span>
  );
}

function Notification({ count }) {
  // 2️⃣ && 연산자 — 조건이 true일 때만 표시
  return (
    <div>
      <h3>알림</h3>
      {count > 0 && (
        <span className="badge">{count}개의 새 알림</span>
      )}
    </div>
  );
}

function UserGreeting({ user }) {
  // 3️⃣ early return — 조건에 따라 완전히 다른 UI
  if (!user) {
    return <p>로그인해주세요.</p>;
  }

  return <h2>환영합니다, {user.name}님!</h2>;
}