React로 To do list 만들기

 CRA를 사용해서, 처음으로 스스로 react app을 만들었다. 카테고리를 만들고, 카테고리마다 한 일을 기록하는 아주 간단한 투두 앱이다. 하지만... 아직 리액트와 그렇게 친하지 않았던 탓인지 나에게는 보통 일이 아니었다😂😂특히 가장 상위 컴포넌트에서 state를 관리한다는 개념이 내 머리를 아프게 했던 것 같다. 온갖 컴포넌트에서 입력되고 수정되는 정보를 state에서 어떻게 관리할지 고민이 참 많이 되었다. state의 데이터 구조가 어떤 형태여야 효율적으로 props를 내려줄 수 있을지 생각을 해 볼 수 있는 기회였다. 또 다른 고민은 컴포넌트들의 depth가 너무 깊어지지 않으려면 어떻게 짜야 할까 하는 부분이었다. 그림을 그렸다 지웠다 하면서 컴포넌트 간의 관계를 여러 방식으로 짜 봤다. 다행히! 3 depth정도로만 내려가는 설계도가 최종적으로 나왔다.

 

 지난 스프린트에서 리액트로만 작성한 코드를 리덕스로 리팩토링 할 기회가 있었는데, 그 때 생각이 참 많이 났다....... state 끌어올리기를 위한 수많은 메서드들이 컴포넌트에 덕지덕지 붙어 있었던 탓이다. 이렇게 작은 규모의 앱을 만들었는데도, 리덕스가 아쉬웠던 걸 보면 store의 힘이 참 강력하구나(ㅋㅋㅋ) 싶었다.  

 

 이번 스프린트를 통해서 리액트에 대한 자신감을 얻어 간 것 같다. 다음에 리액트로 코드를 짠다면 컴포넌트의 재사용성을 더욱 고려한 설계를 해 보고 싶다. 앞으로 얼른 경험이 쌓여서, thinking in react가 어떤 건지 감을 좀 잡을 수 있길!