9-5. 기능 구현 - State 사용하기

앞으로 추가할 일정 항목에 대한 state들은 모두 App.js에서 관리합니다.

App.js에서 useState를 사용하여 todos라는 상태를 정의하고, todos를 TodoList의 props로 전달해봅시다.

// App.js
import './reset.css';
import { useState } from 'react';
import TodoInsert from "./components/TodoInsert";
import TodoTemplate from "./components/TodoTemplate";
import TodoList from './components/TodoList';



function App() {
  const [todos, setTodos] = useState([
    {
      id: 1,
      text: "리액트 기초 알아보기",
      checked: true,
    },
    {
      id: 2,
      text: "컴포넌트 스타일링해 보기",
      checked: true,
    },
    {
      id: 3,
      text: "일정관리 앱 시작하기",
      checked: true,
    },
  ]);

  return (
    <div>
      <TodoTemplate>
        <TodoInsert/>
        <TodoList todos={todos}/>
      </TodoTemplate>
      
    </div>
  );
}

export default App;

todos라는 state 안에는 각 항목마다 id, 내용, 완료여부를 알려주는 checked라는 boolean값이 있습니다.
이 배열은 TodoList에 props로 전달이 됩니다.

이 todos를 통해 전달된 값을 TodoList에서 받은 뒤
TodoListItem을 통해 변환하여 렌더링하도록 코드를 변경해봅시다.

// TodoList.js
import TodoListltem from "./TodoListltem";
import "./TodoList.css";

const TodoList = ({ todos }) => {
    return (
        <section className="TodoList">
            {todos.map(item => (
                <TodoListltem todo={item} key={item.id}/>
            ))}
        </section>
    );
};

export default TodoList;

TodoList에서 map을 통해 TodoListItem에 todos의 모든 값(todo)과 key값(todo.id)을 전달했습니다.

이제 전달받은 값을 통해 TodoListItem을 바꿀 예정입니다.

그전에, 먼저 classnames를 사용하기위해 classnames 라이브러리를 설치합니다.

npm install classnames

이제 설치한 라이브러리를 사용하여 TodoListItem을 바꿔봅시다.

// TodoListItem.js
import {
    MdCheckBoxOutlineBlank,
    MdCheckBox,
    MdRemoveCircleOutline
} from "react-icons/md";
import "./TodoListItem.css";
import cn from "classnames";

const TodoListltem = ({ todo }) => {
    const { text, checked } = todo;

    return (
        <section className='TodoListItem'>
            <div className={cn("checkbox", { checked })}>
                {checked ?<MdCheckBox/>: <MdCheckBoxOutlineBlank/>}
                <div className="text">{text}</div>
            </div>
            <div className="remove">
                <MdRemoveCircleOutline/>
            </div>
        </section>
    );
};

export default TodoListltem;

이제 렌더링된 화면을 확인해보세요.