컴포넌트 분리 방향에 대한 고민
일단 Calendar.tsx 라는 하나의 파일 안에 기능과 UI를 모두 구현하고, 이후 각각의 컴포넌트로 분리하는 과정에서 고민이 있었다. 일단 그림을 그려 컴포넌트를 나누어 보았다.
그림을 그려가면서 컴포넌트를 나누어 보았다.
수정한 방향
컴포넌트 분리는 위치보다, 해당 컴포넌트의 ‘기능’에 초점을 맞추는 것이 좋겠다고 생각해 수정했다. 위에서 그림을 그린 것처럼 위치는 사람마다 상대적인 반면, 기능은 누구에게나 상대적으로 기준이 명확한 편이기 때문이다. 대신, 해당 컴포넌트의 이름 끝에 ~Container, ~Button, ~Unit이라고 붙여주어 구별을 더 쉽게 했다.
정리하자면..
각 Unit은 Unit.style을 참조하여 스타일이 입혀진 Unit으로 탄생하며, 각 Grid은 스타일이 입혀진 Unit과 Grid.style을 참조하여 스타일이 입혀진 Grid로 최종 탄생한다. 그림으로 한번 더 정리하자면 아래와 같다.
그림으로 이해하는 구조
결론: 구조를 잘 잡고 시작하자!
처음 코드를 짤 때는 같은 위계에 있는 컴포넌트의 이름을 container 라고도 짓고, grid 라고 짓기도 하고, component 라고 짓기도 했다. 근데 이들을 하나로 묶어야 하니 아예 grid라고 통일시키고, grid 라는 폴더 안에 DateGrid, DayGrid 이렇게 두었다.
처음에 구조를 머릿속으로만 짜고 잡다가 헷갈려서 그림으로도 그리고 도표로도 정리해 보았다. 이렇게 아예 확정을 짓고 작업하니 훨씬 작업이 빨라졌다. 처음부터 구조를 잘 잡아두고 해야한다는 말이 이해가 되었다.