[리액트 React] 투두리스트 만들기(TodoList)

TodoList 과제 필수 구현 기능

• 제목, 내용을 입력하여 Working에 추가, 삭제 
• 완료 버튼을 누르면 이벤트를 받은 todo가 Done로 내려가고 취소를 누르면 다시 Working로 돌아올 것

초기값 설정

const [list, setList] = useState([
    {
      id: 1,
      title: "todoList",
      content: "과제를 해봅시다",
      isDone: false,
      regDate: (() => {
        const now = new Date();
        const today =
          now.getFullYear() +
          "년" +
          (now.getMonth() + 1) +
          "월" +
          now.getDate() +
          "일";
        return today;
      })(),
    },
    {
      id: 2,
      title: "todoList",
      content: "과제를 해봅시다",
      isDone: false,
      regDate: (() => {
        const now = new Date();
        const today =
          now.getFullYear() +
          "년" +
          (now.getMonth() + 1) +
          "월" +
          now.getDate() +
          "일";
        return today;
      })(),
    },
    {
      id: 3,
      title: "todoList",
      content: "과제를 해봅시다",
      isDone: false,
      regDate: (() => {
        const now = new Date();
        const today =
          now.getFullYear() +
          "년" +
          (now.getMonth() + 1) +
          "월" +
          now.getDate() +
          "일";
        return today;
      })(),
    },
  ]);

 

문제 1_working에서 isDone으로 변경하기 

완료버튼을 눌렀을 때 이벤트를 받은 todo의 isDone 값이  true로 바뀌고 done로 내려가야 한다.

구조는 알지만 어떤 식으로 풀어야 할지 자료를 찾아봐도 이해되지 않아서 결국 튜터님을 찾아갔다.

 

해결 방법

filter메서드를 이용해 List의 isDone 상태가 true인 것을 거른 뒤, 새 배열을 반환하도록 하고 완료 버튼에는 클릭 시 id값을 비교하여 isDone상태를 변경하고 setList에 넣어준다  그럼 완료 버튼을 누르면 isDone으로 내려가게 된다.

      <div className="doneList-div">
        {list
          .filter((item) => item.isDone)
          .map((item) => {
            return (
              <div key={item.id} className="todo-div">
                <div className="todo-content-div">
                  <div className="title-div">{item.title}</div>
                  <div className="content-div"> {item.content}</div>
                  <div className="regDate-div"> 등록일 {item.regDate}</div>
                  <div className="buttons-div">
                    <button
                      onClick={() => removeBtn(item.id, item.title)}
                      className="remove-btn"
                    >
                      삭제
                    </button>
                    <button
                      onClick={() => completedBtn(item.id)}
                      className="cancel-btn"
                    >
                      취소
                    </button>
                  </div>
                </div>
              </div>
            );
          })}
      </div>

 

 

문제 2_id 충돌

id를 length+1로 해놨더니 추가, 삭제, 완료 작업을 반복하다 보면 length를 제대로 찾지 못해 엉망진창으로 꼬이는 현상을 발견했다, 찾아보니 나와 같은 경우들이 많아 쉽게 고칠 수 있었다.

 

해결 방법

useRef를 이용하여 listId 변수에 초기값(4)을 담아주고, todo가 추가될 때마다 id의 현재 값(초기값 4부터 시작)을 기준으로 하나씩 증가시켰다

useRef :리액트는 가상돔이지만, 직접적으로 돔을 지정할 때(포커스, 스크롤이벤트 같은 경우) 사용되는 훅

 // id변수 기본값이 있기 때문에 4부터 시작한다
  const listId = useRef(4);

  const addTitle = (e) => {
    setTitle(e.target.value);
  };

  const addContent = (e) => {
    setContent(e.target.value);
  };
  // 추가 이벤트
  const submitBtn = (e) => {
    const newList = {
      id: listId.current,
      title,
      content,
      isDone: false,
      regDate: (() => {
        const now = new Date();
        const today =
          now.getFullYear() +
          "년" +
          (now.getMonth() + 1) +
          "월" +
          now.getDate() +
          "일";
        return today;
      })(),
    };