TIL231106 (내배캠 React ToDoList 개인과제)-1

React를 이용해 Todolist를 만들어보는 과제를 수행했다.
과제에서 중점적으로 요구한 부분과 내가 구현한 것을 비교해본다.

과제에서 요구한 부분

• UI 구현하기
• Todo 추가하기
• Todo 삭제하기
• Todo 완료상태 변경(완료<->진행중)

헤더태그로 영역을 구분하고, 그 안에 title과 content 입력 후 추가 버튼 누르면 list가 생기도록 구성했다.

Todo 추가하기

<리스트 추가>
// 초기값 설정
const [todolist, setTodolist] = useState([]);
const [title, setTitle] = useState('');
const [content, setContent] = useState('');

// 인풋창 안의 내용 변경 사항 반영
const titleHandler = (event) => {
    setTitle(event.target.value);
  };

  const contentHandler = (event) => {
    setContent(event.target.value);

// 추가 버튼 누르면 리스트업 되도록 구성하고, 조건 따르지 않는 것은 버튼 눌러도 리스트 추가되지 않도록 event.preventDefault을 사용.
const addListButtonHandler = (event) => {
    event.preventDefault();
    <*-----*>
    const newTodoList = {
      id: todolist.length + 1,
      title: title,
      content: content,
      isDone: false,};
      setTodolist([...todolist, newTodoList]);
    setTitle('');
    setContent('');};
      // 새로운 리스트 추가 시 불변성을 위해 새로운 배열 배정해줌.
      // 진행 중인 리스트와 완료된 리스트 구분하기 위해 isDone 사용하여 false는 진행 중,
      !==false 인 것은 완료 리스트로 구분함.
    };
    

Todo 삭제하기

const deleteTodolist = (id) => {
    const updatedTodoList = todolist.filter((item) => item.id !== id);
    setTodolist(updatedTodoList);
  };

리스트 삭제 시 아이디가 기존의 아이디와 같지 않은 것을 뽑아내라는 필터 메서드를 이용해서
아이디와 같지 않다는 말 즉, 없애라 라는 의미로 리스트 삭제 할 수 있도록 했다.

Todo 완료상태 변경

  const toggleDone = (id) => {
    const updatedTodoList = todolist.map((item) => {
      if (item.id === id) {
        return { ...item, isDone: !item.isDone };
      }
      return item;
    });
    setTodolist(updatedTodoList);
  };

리스트 완료 처리 시 토글 기능을 이용해 완료된 부분은 완료 버튼을 통해 완료 섹션으로 이동할 수 있도록 하고, 완료된 리스트는 취소 버튼을 누르면 다시 진행 중 섹션으로 이동할 수 있도록 하였다.
여기서 완료된 리스트를 구분하기 위해 맵 메서드를 사용했다.
아이디가 주어지고, 아이디 key 중 isDone이 false가 아닌, 즉 false의 반대가 되는 것들을 뽑아내라는 의미이므로 완료된 것들을 뽑아낼 수 있도록 하였다.