조건에 따라 보여주고, 목록을 그리기

조건부 렌더링(Conditional Rendering)은 어떤 조건이냐에 따라 화면에 다른 걸 보여주는 것이에요. 예를 들어 로그인 상태면 "로그아웃 버튼"을, 아니면 "로그인 버튼"을 보여주는 식이죠. JSX 안에서는 if 문을 직접 쓸 수 없어서, 주로 삼항 연산자나 논리 &&를 써요.

function Greeting({ isLogin }) {
  return (
    <div>
      {isLogin ? <p>환영합니다!</p> : <p>로그인이 필요해요.</p>}
    </div>
  );
}

function Inbox({ count }) {
  return (
    <div>
      {count > 0 && <p>새 메시지 {count}개</p>}
    </div>
  );
}

function Profile({ user }) {
  // early return: user가 없으면 여기서 끝
  if (!user) return <p>로그인이 필요해요.</p>;

  // 변수에 담기
  const badge = user.isAdmin ? <span>👑 관리자</span> : null;

  return (
    <div>
      <h2>{user.name}</h2>
      {badge}
    </div>
  );
}

조건 && A에서 조건 자리에 숫자 0이 오면 문제가 생겨요. 자바스크립트에서 0은 falsy지만, 리액트는 0이라는 값을 그대로 화면에 그려버려요. 그래서 아무것도 안 나오길 기대했는데 화면에 "0"이 덩그러니 찍힙니다.

function Cart({ count }) {
  // ❌ count가 0이면 화면에 "0"이 그대로 찍힘!
  return (
    <div>
      {count && <p>장바구니에 {count}개 담김</p>}
    </div>
  );
}

{count && <p>항목이 있어요</p>}

0 && "안녕"        // → 0  (0을 그대로 반환)
false && "안녕"    // → false
null && "안녕"     // → null
"" && "안녕"       // → ""

{user.isLoggedIn && <p>환영합니다</p>}
{errorMessage && <p>{errorMessage}</p>}

<p>{count}개 남음</p>   // count가 0이면 → "0개 남음"이 정상적으로 보여야 함

{count > 0 && <p>항목이 있어요</p>}   // 명시적으로 boolean으로 만들기
{Boolean(count) && <p>...</p>}
{count ? <p>항목이 있어요</p> : null}

해결책은 조건을 진짜 불리언(true/false)으로 만들어 주는 거예요. count > 0처럼 비교식을 쓰면 결과가 true/false라 안전합니다.

function Cart({ count }) {
  // ✅ count > 0 은 true/false → 0일 땐 아무것도 안 나옴
  return (
    <div>
      {count > 0 && <p>장바구니에 {count}개 담김</p>}
    </div>
  );
}

화면에 여러 개를 반복해서 그릴 때는 배열의 map() 메서드를 써요. map은 배열의 각 항목을 JSX 요소로 변환해서 JSX 배열을 만들어요. 리액트는 그 배열을 받아 하나하나 화면에 그립니다.

function FruitList() {
  const fruits = ['사과', '바나나', '포도'];

  return (
    <ul>
      {fruits.map((fruit) => (
        <li>{fruit}</li>
      ))}
    </ul>
  );
}
// 결과: 사과 · 바나나 · 포도 세 개의 <li>

객체 배열이면 원하는 속성을 꺼내 쓰면 돼요.

const items = [
  { id: 1, name: '키보드' },
  { id: 2, name: '마우스' },
];

function ProductList() {
  return (
    <ul>
      {items.map((item) => (
        <li>{item.name}</li>
      ))}
    </ul>
  );
}

map으로 만든 각 요소에는 고유한 key를 붙여야 해요. key는 리액트가 "어떤 항목이 추가·삭제·변경됐는지"를 효율적으로 추적하기 위한 이름표예요(재조정 과정에서 사용). key가 없으면 콘솔에 경고가 뜨고, 목록이 바뀔 때 비효율적으로 다시 그려질 수 있어요.

const items = [
  { id: 1, name: '키보드' },
  { id: 2, name: '마우스' },
];

function ProductList() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

고유 id가 없다고 map((item, index) => <li key={index}>)처럼 배열 index를 key로 쓰는 경우가 많아요. 목록이 절대 안 바뀌면(고정 순서, 추가·삭제 없음) 괜찮지만, 목록 순서가 바뀌거나 항목을 추가·삭제하면 버그가 생겨요.

// ❌ 순서가 바뀌거나 추가/삭제되면 버그 위험
{items.map((item, index) => (
  <li key={index}>{item.name}</li>
))}

// ✅ 데이터의 고유 id를 key로
{items.map((item) => (
  <li key={item.id}>{item.name}</li>
))}