[React] 조건부 렌더링 (Conditional Rendering)

1. 삼항 연산자

const isLoggedIn = true;
return <p>{isLoggedIn ? '환영합니다!' : '로그인해주세요'}</p>;

2. 논리 연산자

const hasNewMessage = true;
return <p>{hasNewMessage && '새로운 메시지가 도착했습니다!'}</p>;

3. if 문 사용 (JSX 바깥에서)

let content;
if (isLoggedIn) {
  content = <p>로그아웃</p>;
} else {
  content = <p>로그인</p>;
}
return <div>{content}</div>;

---

✅ 리스트 렌더링 (List Rendering)

React에서는 배열의 .map() 메서드를 사용해 컴포넌트를 반복 렌더링한다.

const fruits = ['🍎', '🍌', '🍇'];

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

🔐 key 속성의 중요성
key는 React가 각 항목을 식별하고 렌더링 성능을 최적화하기 위해 필요.
가능하면 고유한 ID를 사용해야 한다. index는 정렬이나 삭제가 없을 때만 사용 권장.