[React] 기능 구현_①App에서 todos 상태 사용하기

📌 나중에 추가할 일정 항목에 대한 상태들은 모두 App 컴포넌트에서 관리한다.
✔ ① App에서 useState를 사용해 todos라는 상태를 정의하고
✔ ② todos를 TodoList의 props로 전달해보자!

① App에서 useState를 사용해 todos라는 상태를 정의

• App.jsx

import React, { useState } from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';

const App = () => {
  /* todos 배열 안에 들어 있는 객체 
     => 각 항목의 고유 id, 내용, 완료 여부를 알려 주는 값이 있음.
  */
  const [todos, setTodos] = useState([
    {
      id: 1,
      text: '리액트 기초 알아보기',
      checked: true,
    },
    {
      id: 2,
      text: '컴포넌트 스타일링해 보기',
      checked: true,
    },
    {
      id: 3,
      text: '일정 관리 앱 만들어 보기',
      checked: false,
    },
  ]);

  return (
    <TodoTemplate>
      <TodoInsert />
      {/* <TodoList /> */}
      {/* todos 배열을 TodoList로 전달 */}
      <TodoList todos={todos} />
    </TodoTemplate>
  );
};

export default App;

② todos를 TodoList의 props로 전달

• TodoList.jsx

import React from 'react';
import './TodoList.scss';
import TodoListItem from './TodoListItem';

const TodoList = ({ todos }) => {
  return (
    <div className="TodoList">
      {/* todos 배열이 TodoList에 props로 전달되면서 3번 저렇게 작성할 필요가 없어짐!*/}
      {/* 
      <TodoListItem />
      <TodoListItem />
      <TodoListItem /> 
      */}
      {/* 대신에... props로 받아 온 todos 배열을 배열 내장 함수 map을 사용해 TodoListItem으로 이루어진 배열로 변환해서 렌더링!*/}
      {/* map을 사용해 컴포넌트로 변환할 때 => key props를 전달해줘야 함. */}
      {/* todo 데이터는 통째로 props로 전달 => 여러 종류의 값 전달 시, 추후 성능 최적화할 때 편리 */}
      {todos.map((todo) => (
        <TodoListItem todo={todo} key={todo.id} />
      ))}
    </div>
  );
};

export default TodoList;

③ TodoListItem 컴포넌트에서 받아 온 todo 값에 따른 UI 보여주기

여기서는 조건부 스타일링을 위해 classnames를 사용할 예정임!

• TodoListItem.jsx

import React from 'react';
import {
  MdCheckBoxOutlineBlank,
  MdRemoveCircleOutline,
  MdCheckBox,
} from 'react-icons/md';
import './TodoListItem.scss';
import cn from 'classnames';

export default function TodoListItem({ todo }) {
  const { text, checked } = todo;

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