Todo List만들기 #06_todo체크상태 기능 만들기

체크상태 수정하는 기능도 지우는 기능 만들었던 것처럼 App.js에서 함수를 만들어서
App.js → TodoList.js → TodoListItem.js 로 prop를 이용해서 전달되게 하면 된다.

onToggle함수 구현
App.js

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

const App = () => {
  const [todos, setTodos] = useState([
    {
      id: 1,
      text: '리액트의 기초 알아보기기',
      checked: true,
    },
    {
      id: 2,
      text: '컴포넌트 스타일링 해보기',
      checked: true,
    },
    {
      id: 3,
      text: '일정 관리 앱 만들어 보기',
      checked: false,
    }
  ]);

  const nextId = useRef(4);

  const onInsert = useCallback(
    text => {
      const todo = {
        id: nextId.current,
        text,
        checked: false,
      };
      setTodos(todos.concat(todo));
      nextId.current +=1;
    },
    [todos],
  );

  const onRemove = useCallback(
    id => {
      setTodos(todos.filter(todo => todo.id !==id));
    },
    [todos],
  );

  const onToggle = useCallback(       // toggle 기능 만들기
    id => {
      setTodos(
        todos.map(todo =>
          todo.id === id ? { ...todo, checked: !todo.checked } :todo,
          ),
      );
    },
    [todos],
  );

  return (
    <TodoTemplate>
      <TodoInsert onInsert={onInsert} />
      <TodoList todos={todos} onRemove={onRemove} onToggle={onToggle} />
    </TodoTemplate>
  );
};

export default App;

onToggle이라는 함수를 만들었다.
todos array에 map함수를 이용해서 새로운 배열을 생성하게 함.
ternary expression으로 표현했는데, todo.id가 parameter로 사용된 id와 같은 경우,
...todo, checked: !todo.checked(checked를 반대로 반환함. true면 false, false면 true)
todo.id가 parameter로 사용된 id와 다른 경우, 변화 없이 그대로 반환함.

TodoListItem.js

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

const TodoListItem = ({ todo, onRemove, onToggle }) => {
    const { id, text, checked } = todo;

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

export default TodoListItem;

props로 onToggle을 받아오게 하고, checkbox가 있는 div태그에 onClick이벤트 추가해줬음.
click하게 되면 onToggle이 trigger되고, id가 parameter로 전달됨.

TodoListItem에서 onToggle함수 호출하기
App.js → TodoList.js → TodoListItem.js 이렇게 onToggle함수가 전달되어야 함.

TodoLis.js

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

const TodoList = ({ todos, onRemove, onToggle }) => {
    return (
        <div className="TodoList">
            {todos.map(todo => (
                <TodoListItem todo={todo} key={todo.id} onRemove={onRemove} onToggle={onToggle} />
            ))}
        </div>
    );
};

export default TodoList;

props로 onToggle을 받아오고, TodoListItem에 추가해주면 됨.