todos 배열 안에 들어 있는 객체에는 각 항목의 고유 id, 내용, 완료 여부를 알려 주는 값이 포함되어 있습니다. 이 배열은 TodoList에 props로 전달되는데요. TodoList에서 이 값을 받아 온 후 TodoItem으로 변환하여 렌더링하도록 설정해야 합니다.

TodoList.js

import React from 'react';
import TodoListItem from './TodoListItem';
import './TodoList.scss';
 
const TodoList = ({ todos }) => {
  return (
    <div className="TodoList">
      {todos.map(todo => (
        <TodoListItem todo={todo} key={todo.id} />
      ))}
    </div>
  );
};
 
export default TodoList;

---

 

props로 받아 온 todos 배열을 배열 내장 함수 map을 통해 TodoListItem으로 이루어진 배열로 변환하여 렌더링해 주었습니다. map을 사용하여 컴포넌트로 변환할 때는 key props를 전달해 주어야 한다고 배웠지요? 여기서 사용되는 key 값은 각 항목마다 가지고 있는 고윳값인 id를 넣어 주세요. 그리고 todo 데이터는 통째로 props로 전달해 주세요. 여러 종류의 값을 전달해야 하는 경우에는 객체로 통째로 전달하는 편이 나중에 성능 최적화를 할 때 편리합니다.