✅ React 기초 강좌

📄 components/TaskList.jsx

function TaskList({ tasks }) {
  return (
    <div>
      <h2>📝 할 일 목록</h2>
      {tasks.length === 0 ? (
        <p>할 일이 없습니다.</p>
      ) : (
        <ul>
          {tasks.map((task, index) => (
            <li key={index}>- {task}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default TaskList;

📄 App.jsx에서 사용 예시

import TaskList from './components/TaskList';

function App() {
  const tasks = ['React 공부하기', '운동하기', '블로그 글 쓰기'];
  // const tasks = []; // 할 일이 없을 때 테스트용

  return (
    <div>
      <h1>React 조건부 & 리스트 렌더링</h1>
      <TaskList tasks={tasks} />
    </div>
  );
}

export default App;

✅ 결과 예시

✅ tasks 배열이 있을 경우

📝 할 일 목록
- React 공부하기
- 운동하기
- 블로그 글 쓰기

✅ tasks 배열이 비어있을 경우

📝 할 일 목록
할 일이 없습니다.