프로젝트 취지
기본 예제인 Todolist를 변형시켜 가계부를 작성할수있게 변형시켜보았다.
만든방법
component폴더에 구성요소를 나눠서 담았다.(AddDialog,TodoContext,TodoCreate,TodoHead,TodoItem,Todolist,TodoTemplate)
각 상태를 업데이트, 삭제, 동작하는 custom hook을 TodoContext에 따로 만들어주고 필요한 컴포넌트에서 호출해서 사용할 수 있게 하였다.
기본적인 구성을 이러하다.TodoCreate에서 AddDialog를 호출해서 사용한다.
AddDialog에서 각 값을 입력을 받으면 useTodoDispatch를 사용하여 해당하는 동작을 실행시켜준다. TodoItem에서는 todos의 상태를 받아와 펼쳐주는 역할을 하는데 props로 category를 받아와 해당하는 category에 스타일을 각각 적용하였다. REMOVE를 action으로 취하는 함수를 만들어 삭제 기능을 추가해 주었다. 이러한 TodoItem을 TodoList에서 불러왔는데 useTodoState를 사용하여 현재 상태를 배열로 불러와 map을 통해서 펼쳐주었다. TodoHead에서는 오늘의 날짜를 출력하여주고 TodoItem의 amount 값을 합산하여 반환해주는 기능을 구현하였다. 마찬가지로 useTodoState를 사용하여 현재의 배열을 불러와서 사용하였다. 이러한 모든 컴포넌트를 TodoTemplate안에 담아서 렌더링 하였다.
후기
React를 학습하면 학습 할 수록 javaScript의 본연의 실력이 매우 중요하다고 느꼈다. javaScript를 공부하지 않은것은 아닌데 Ecs문법에는 약한감이 없지않아 있었는데 React에서는 Ecs문법을 자주 사용하여 막히는 부분이 자주 발생하였다. 틈틈히 막히는 부분을 해결하고 해당하는 부분의 Ecs문법을 공부하여 보완하였다. 이런 경험을 통해서 연습을 하는데 있어서 잦은 라이브러리의 사용은 코딩 실력을 늘리는데 도움이 되지 않는다는것을 알게되었다. 하나를 학습할 때 많은 것을 하는 것도 중요하지만 하나를 깊이있게 공부하는 것 또한 몹시 중요하다는 것을 다시금 깨닳게 되었다.
