리액트 리스트 & 조건부 렌더링｜map(), 삼항 연산자 실전 예제로 쉽게 배우기

📘 리액트 스터디 시리즈 5편

리스트 렌더링 & 조건부 렌더링｜React로 유동적인 UI 만들기

안녕하세요! 오늘은 리액트에서 리스트를 출력하는 방법과 조건에 따라 UI를 다르게 보여주는 방법을 배워봅니다 😊

이제부터는 데이터에 따라 동적으로 화면을 구성할 수 있어요!

---

🔁 리스트 렌더링 (map 사용)

React에서는 배열.map()을 이용해 컴포넌트를 반복 출력합니다.

const items = ['사과', '바나나', '포도'];

function ItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

• ✅ 각 요소를 li로 렌더링
• ✅ key는 각 항목의 고유값 (index는 임시로 사용 가능)

🎯 주의: key는 React가 변경된 항목을 추적하는 데 사용되며, 같은 컴포넌트 내에서는 고유해야 합니다.

---

📦 실습 - 유저 리스트 출력하기

const users = [
  { id: 1, name: '영희' },
  { id: 2, name: '철수' },
  { id: 3, name: '민수' },
];

function UserList() {
  return (
    <div>
      {users.map((user) => (
        <p key={user.id}>👤 {user.name}</p>
      ))}
    </div>
  );
}

📋 결과: 각 유저의 이름이 리스트 형식으로 출력됩니다.

---

🔀 조건부 렌더링 (조건에 따라 출력 여부 결정)

React에서는 삼항 연산자나 논리 연산자를 이용해 조건부 UI를 구성할 수 있어요.

✔ 삼항 연산자

const isLoggedIn = true;

function Greeting() {
  return (
    <h1>
      {isLoggedIn ? '환영합니다!' : '로그인해주세요'}
    </h1>
  );
}

✔ 논리 연산자 (&&)

const hasMessage = true;

function Notification() {
  return (
    <div>
      {hasMessage && <p>📨 새로운 메시지가 도착했습니다</p>}
    </div>
  );
}

🎯 조건이 true일 때만 해당 UI를 보여주고 싶을 때 유용합니다.

---

📋 실습 - 좋아요 수 출력하기

function LikeCount({ count }) {
  return (
    <div>
      {count === 0 ? (
        <p>🤍 아직 좋아요가 없습니다</p>
      ) : (
        <p>❤️ 좋아요 {count}개</p>
      )}
    </div>
  );
}

💡 조건에 따라 다른 메시지를 보여주는 대표적인 예입니다.

---

🧠 정리 - 오늘 배운 핵심 포인트

• ✔️ 배열 데이터를 JSX에서 map()으로 렌더링
• ✔️ 각 항목에 key 속성 필수
• ✔️ 조건부 렌더링은 삼항 연산자 또는 && 사용
• ✔️ 다양한 상황에 따라 동적인 UI 구성 가능

---

📌 다음 편 예고

다음 6편에서는 useEffect 훅을 배우고, API 호출이나 타이머처럼

사이드 이펙트

를 다루는 법을 알아볼 거예요 🧪

🔥 리액트의 라이프사이클에 한 걸음 더 다가가는 시간, 기대해주세요!

---

💬 댓글이나 질문은 언제든지 환영입니다 🙌 좋아요와 구독으로 스터디에 함께해요!