📘 리액트 강의 5편 - 조건부 렌더링과 리스트 출력

이번 강의에서는 map()을 이용한 반복 렌더링과 조건부 렌더링을 다룹니다.
리액트에서 데이터를 배열로 관리할 때, 이를 화면에 출력하는 방법은 꼭 알아야 합니다.

---

1. 리스트 렌더링: map() 함수

배열의 요소들을 컴포넌트로 바꿔주는 대표적인 방법은 map()입니다.

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

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

✅ 주의: key 속성

• 리액트는 리스트 요소에 key를 꼭 요구합니다.
• key는 각 요소를 고유하게 식별할 수 있는 값 (보통 id, 아니면 index)

---

2. 조건부 렌더링

조건에 따라 화면에 요소를 보이거나 숨길 수 있습니다.

기본 형태

{조건 && <출력할 요소>}
{조건 ? <참일 때> : <거짓일 때>}

---

3. 예제: 할 일 리스트 앱

💡 기능

• 할 일 목록 출력
• 완료 여부에 따라 표시 다르게
• 아무것도 없을 경우 “할 일이 없습니다” 메시지 출력

---

📄 App.js

import { useState } from "react";

function App() {
  const [todos, setTodos] = useState([
    { id: 1, text: "리액트 공부하기", done: true },
    { id: 2, text: "운동하기", done: false },
    { id: 3, text: "블로그 쓰기", done: false },
  ]);

  return (
    <div>
      <h1>📋 할 일 목록</h1>

      {todos.length === 0 ? (
        <p>할 일이 없습니다.</p>
      ) : (
        <ul>
          {todos.map((todo) => (
            <li key={todo.id}>
              {todo.done ? <s>{todo.text}</s> : todo.text}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default App;

---

결과 화면 예시

📋 할 일 목록
✓ 리액트 공부하기  ← 취소선 처리
- 운동하기
- 블로그 쓰기

---

핵심 정리

개념 설명

map()	배열 데이터를 반복해서 컴포넌트로 출력
key	각 요소를 유일하게 구분하는 값
조건부 렌더링	값에 따라 다르게 보이는 UI 구현 가능 (&&, ? :)