자바스크립트 모듈을 이용해서 컴포넌트를 쪼개고, App.js에서 통합으로 상태를 관리할 수 있도록 애플리케이션을 만들었다.
상위 컴포넌트인 App.js에서는 최대한 '상태의 관리'에 집중하고, 뷰를 그리는 것과 로직을 처리하는 것들은 하위 컴포넌트에서 처리되도록 하기 위해 고민했다(쉽지 않았다).
하위 컴포넌트에서 로직을 처리하면서 변경되는 상태는 다시 App.js로 끌어올려서 의존이 있는 다른 컴포넌트의 setState()를 호출해 변경된 상태를 등록해줘야 한다. 그러기 위해 App.js에 있는 setState() 메서드를 하위 컴포턴트들의 파라미터로 전달하고, 하위 컴포넌트에서 상태의 변화를 상위 컴포넌트인 App.js의 setState()에 인자로 전달했다.
해당 방식으로 하다보니, 하위 컴포넌트에서 함수를 쪼개고, 인자로 필요한 값들을 전달할 때, 상위 컴포넌트의 setState()가 여러 군데에서 참조되면서 상태의 흐름을 파악하는 게 복잡해지는 문제가 있었다.
아직은 도구의 도움보단, 순수 언어로만 구현하는 연습을 더 해보려고 한다. 내일 한번 더 처음부터 개발해보면서 어디서 어떻게 상태를 관리해야 효율적이고, 코드적으로도 상태의 흐름을 직관적으로 파악할 수 있을지 다시 고민해봐야겠다.
오늘 개발한 부분에서 100% 완벽하게 구현하지 못한 부분이 있었다.
TODO Items의 업데이트를 TODO 상태를 관리하는 배열을 기반으로 한 게 아니라, DOM에서 캐치한 $ul 태그의 하위 요소 기준으로 생성-토글했다.
그렇게 하니, filter의 상태를 '완료'로 해둔 상태에서 새로운 TODO item을 추가했을 때 필터가 적용되지 않고 화면에 뿌려지는 문제가 있었다.
