드디어 투두리스트의 원리를 이해했다.
불과 저번주까지만 해도 React를 이해하기가 정말 어려웠다.
특히 props, useState부분은 아무리 강의를 들어도 이해가 안됬는데, 신기하게도 직접 따라치면서 외우다보니 이해가 되었다.
먼저 간단히 만들어본 결과물이다.
처음에는 어디서부터 어떻게 해야할지 감이 잡히지 않아서, 멘뭉이였지만
강의를 30번 들어보고 그래도 안되면 찾아오라는 튜터님의 말씀대로, 우선은 강의를 달달달 외우기 시작했다.
그러다보니 강의를 20번정도 들으면서 계속 따라칠 때는, 코드를 안보고 투두리스트를 완성 할 수 있었다.
정말 놀라운건 처음에는 아무생각 없이 코드를 작성했지만, 지금은 이 코드를 왜 쳐야하는건지 작동 원리까지 습득을 하게 되었다.
다만 역시나 어려운 부분은 있기 마련이다.
todo를 넣는 부분
input.js const onHandleSubmit = (e) => { e.preventDefault(); if (!title) { alert("제목을 써주세요"); return; } if (!contents) { alert("내용을 써주세요"); return; } // 여기 부분까지는 정말 문제없이 이해가 되었다. 하지만 아래부분부터 살짝 이해가 힘들었다. const newTodos = { // 여기서 새롭게 내가 작성 할 Todo를 입력해야하는데, 처음에는 왜여기다가 newTodos라는 변수를 만들어서 넣어야하는지 이해가 가질 않았다. title: title, // 하지만,해당 form을 제출하면서 todo를 넣어야하니, 당연히 여기에 들어가는 부분이었다. contents: contents, isDone: false, id: uuidv4(), // 덕분에 uuid라는 개념도 배웠다. }; setTodos((prev) => { // 사실 여기는 조금 암기를 해서 풀어나갔다. seTtodos에는 이전값을 불러올 수 있는 기능이 있는데, 바로 그 기능 + 스프레드 문법을 통해서, 추가를 하는 방법이었다. return [...prev, newTodos]; }); setTitle(""); setContents(""); }; // 여기는 계속 반복을 하니 바로 이해가 되었던 부분이기도하다.
todo를 삭제하는 부분
const onDeleteHandle = () => { setTodos((prev) => prev.filter((t) => t.id !== item.id)); }; // 이렇게 코드로 보면 굉장히 간단하지만 여기서 5번정도 쳐보고 하나씩 뜯어 본 뒤에 이해가 되는 부분이었다. 특히, setTodos의 prev 기능을 통해서 풀어나갔는데, filter 함수를 이용했다. // 쉽게말하면 내가 삭제할려는 todo와 내가 눌렀던 todo의 id 값이 일치하면 그 todo를 지워야하는 코드인데, 왜 t.id !== item.id 인지 이해가 안되었다. '내가 눌렀던 todo와 삭제할려는 todo가 같으면 그 코드를 지워라' 가 더 맞이 않을까 생각이 들어서 '!'를 빼고 진행을 해보았다.
그랬더니 내가 눌렀던 todo를 제외하고는 다 사라지는 것이었다.
알고보니 filter 문법을 통해서, 내가 지우려는 todo를 제외하고 화면에 랜더링을 해야하는 것이었다.
덕분에 filter 문법에 대해서 다시 한 번 공부를 하게 되었고, 직접 코드를 뜯어가면서 만들어보니 이해가 2배로 잘 되는 것 같았다.
다음은 상태변경 부분이다
// 가장 이해가 안되는 부분이었다. map함수를 비롯하여 if 조건문, 그리고 구조분해까지 가장 이해가 안되었던 부분이기도 하다. const onHandleSwitch = () => { // 우선 완료/취소 버튼을 누르면 해당 isDone 값의 상태를 false에서 true로 바꿔야하는 코드이다. setTodos((prev) => { //똑같이 setTodos(prev)를 이용하여, 이전값을 불러와야한다. return prev.map((t) => { //그리고 map 함수를 이용하여 't'라는 방을 만든다음에 해당 조건에 맞는 것들을 출력해주면 된다. if (t.id === item.id) { // 내가 누른 todo와 item의 todo가 같다면 return { ...t, isDone: !t.isDone }; // 그 todo 의 값중 isDone이란 상태를 반대로 바꿔줘라 } else { return t; // 만약 내가 누른 todo와 item의 todo가 같지 않다면, 그대로 출력을 해라 } }); }); }; 사실 여기부분은 아직 1%의 이해가 부족하긴 하다. 특히 return {...t, isDone: !t.isDone} 부분이 왜 이렇게 작성이 된지 이해가 안된다. 하지만 매일매일 코드를 보고 계속 원리를 따져가면서 체크를 하다보면 빠른 시일내 이해가 가능 할 것 같다.
지금까지 진행했던 내배캠 과정 중 가장 값진 결과물이 아닐까 싶다.
여기서부터는 CSS를 조금만 신경써주면 그럴법한 투두리스트 까지 만들어 볼 수 있을 것 같았다.
