리액트로 todolist를 만드는 작업을 했다.
기능
- 제목과 내용을 적고 추가하기 누르면 working에 추가되도록 하기
- 완료하기 누르면 done으로 넘어가게 만들기
- 삭제하기 버튼을 누르면 삭제되게 하기
- done에서 취소버튼 누르면 working으로 넘어가게 하기
Todolist ver1
(다른 파일의 코드를 보려면 코드 위에 메뉴를 눌러주세요!)
리액트로 무언가를 만들어보는건 처음이라 재밌기도 하고 state나 props을 어떻게 사용하는지를 어느정도 알게되었다 하지만 컴포넌트 분리를 어떻게 해야할지 감이 안잡혔고 그래서 하위 컴포넌트에서 작업해야할 함수들도 전부 상위 컴포넌트에 몰려있었다. 이렇게 되면 사실상 하위 컴포넌트를 만들 이유가 없었다.
그래서 결국 ver2를 만들어보자 해서 컴포넌트 분리작업을 시작했다.
Todolist ver2
코드가 훨씬 깔끔해지고 컴포넌트 분리가 잘되었다!
useState를 완료되지 않은 것과 완료된 것 2개로 나누어서 관리했는데 이걸 하나로 관리하는게 좋을것 같다는 매니저님의 의견을 바탕으로 isDone이라는 프로퍼티를 추가해서 하나로 통합하도록 했다. true면 완료하지 않은것 false면 완료한 것으로 보고 완료하면 true에서 false로 완료한 일들중 취소버튼을 누르면 false에서 true로 바꾸도록 코드를 짰다.
Header라는 컴포넌트를 새로 만들어서 제목과 내용을 입력하고 그 내용을 받아 setTodo를 변경해주는 방식으로 진행했다. props로는 todo와 setTodo를 넘겨주었고 비구조분해 할당으로 객체로 받아 같은 이름을 써서 코드를 써내려갔다. todo리스트에 완료하거나 삭제하는 일들을 구현하는 함수들은 working 컴포넌트로, done에서 삭제하거나 취소하는 일을 구현하는 함수들은 done컴포넌트로 넘겨주었다.
처음 ver1을 만들었을땐 기능구현은 다 됐다는 기쁨과 동시에 뭔가 만족스럽지않은 찝찝함이 남아있었다. 사실 컴포넌트 분리를 해야겠다는 생각이 들었을때 어디서부터 어디까지 건드려야할지 모르겠어서 너무 막막했다. 하지만 하나하나 오류도 잡아가며 코드를 짜니 나에게도 너무 만족스러운 결과가 나왔다. 게다가 상위 컴포넌트에서 하위컴포넌트로 데이터를 넘겨줄때 비구조분해 할당으로 넘겨주면 props를 쓰지 않고도 해당 이름을 그대로 쓸 수 있어 나중에 코드를 봐도 헷갈리지 않겠다는 생각이 들었다. 내일은 또 새로운걸 만들어보고싶다.
