더북(TheBook)

10.2.5 TodoList 컴포넌트 생성

 

TodoList 컴포넌트는 데이터 배열을 컴포넌트 배열로 변환하여 렌더링하는 역할만 합니다. 따로 스타일링할 것은 없습니다. 데이터 배열을 변환하는 과정을 구현하기 전에 먼저 TodoItem 컴포넌트를 불러와 임시 데이터를 넣어서 두 TodoItem 컴포넌트를 렌더링해 보겠습니다.

src/components/TodoList/TodoList.js

import React, { Component } from ‘react’;
import TodoItem from ‘../TodoItem’;
 
class TodoList extends Component {
  render() {
    return (
      <div>
        <TodoItem done>리액트 공부하기</TodoItem>
        <TodoItem>컴포넌트 스타일링 해보기</TodoItem>
      </div>
    );
  }
}
 
export default TodoList;

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.