부트캠프가 끝나고 부족한 이론을 공부하다 까먹기전에 코드를 좀 쳐야겠다는 생각이 들어서 간단한 todo list를 만들어보기로 했다.
다만 서버의 도움을 받을 수 없으니 local host의 도움을 받기로 했다.
생각으로는 엄청 쉬울 것 같았는데 나에게는 고난과 시련이 기다리고 있었다.
이런느낌..?
시작하기 전에 그림으로 그려놓고 필요한 내용이 무엇인지 체크하는 과정을 거쳤다.
간단하게 nav, main, input으로 구역은 나누어져있고 그림으로 표현하지 못한 수정 버튼과 다크모드 구현을 함께 해보기로 했다.
- nav
- All(전체보기), Active(해야할 todo), Completed(끝낸 todo) 버튼을 눌렀을 때 해당하는 todo만 filtering해주는 기능
- 다크모드 버튼
- main
- checkbox, todo, edit, delete
- checkbox : check상태를 follow하여 filtering에 연결시켜주기
- edit : 버튼 누르면 edit 상태 활성화, 수정된 내용으로 바꿔주거나 x버튼 누르면 이전상태로 되돌리기
- delete : 삭제
- input
- todo 추가
첫번째 시도
nav, main, input 모두 component를 처음부터 나누고 시작했다.
input의 state를 부모로 올려서 main과 nav에 props로 내려주는 것이 기능에 비해 너무 복잡한 것 같다는 생각이 들어 지웠다.
두번째 시도
한 컴포넌트 안에서 nav, main, input을 만들었다.
하지만 가독성이 너무 떨어져서 다시 깔끔하게 만들어보기로 했다.
세번째 시도
이번에는 컴포넌트는 나누되 아예 처음부터 localStorage를 활용해보기로 했다.
서버처럼 사용하는 것이다.
다만 문제가 있었다. react는 state와 props의 변화만이 관심사이기 때문에 localStorage의 변화는 UI에 변화를 주지 못한다는 것이었다.
그래서 함수안에서 변수를 선언하여 state와 localStorage에 넣어줄 내용을 저장했다.
모든 것은 순탄하게 잘 흘러가는 것처럼 보였지만 filtering을 하면서 모든 문제가 들어났다.
1. filtering한 todo와 filtering 버튼을 누르기 전에 todo가 존재하는데 어떻게 둘을 잘 조합해야할지 모르겠다.
2. 개발자도구에서는 미친듯이 무한루프를 돌리고 있다. (뭔가 거대한 일을 하고 있는 것 같다..!)
3. 갑자기 todo를 추가하는 state를 react에서 인지하지 못하는 것 같았다.
이번 시도도 뭔가 단단히 잘못된것 같았다.
다시 마음을 다잡고 모든 코드를 리셋시켰다.
네번째 시도
역시나 filtering을 하는 과정은 너무 어려웠다.
내가 가지고 있는 state는 All에 해당하는 모든 정보를 가지고있어야 Active 또는 Completed 버튼에 갔다가 돌아오더라도 이전의 정보를 보여줄 수 있는데 중간중간 변경되는 check, edit 등을 모두 고려하면서 하기란 나에게 너무 어려웠다.
가장 부모가 되는 Todo 컴포넌트는 all인 전체 정보를 가지고 있고 props로 내려받은 정보를 filtering해서 content 컴포넌트에서 가지고 있었다.
다만 변경되는 정보는 변경되는 함수를 변수로 저장하여 부모에게 올려주어 계속해서 todo를 업데이트 해주니 해결되었다!!
