컴포넌트가 맘에 안든다🤷🏻♀️
React 심화 과제 - 캘린더
어제 열심히 기능을 만들었다면 오늘은 styled-components를 이용해서 스타일을 적용했다.
이번에는 CSS에 그렇게 욕심을 부리지도 않았는데 일단 규모가 저번 과제 대비 크고, 복잡해서 정말 오래 걸리는 느낌😂
1차 배포를 목표로 잡았지만 결국 배포 못했다.
오늘 한 일을 몇 가지로 나눠보면 아래와 같다.
1. 다크모드(?)만 적용
처음부터 Black & White에 여러 라벨색을 넣어야겠다고 생각했지만 그게 다크모드는 아니었다.
하지만 흰색 배경을 계속 보다보니 눈도 아프고 재미도 없길래 어쩌다보니 어두운 배경으로 진행하게 되었다.
이전에 다크모드에 관한 글에서 완전한 검은색(#000000)과 흰색(#FFFFFF)은 조합하지 말라는 글을 본 적이 있다.
눈이 피로하기 때문이다.
그래서 검은색은 #202020, 흰색은 #F5F5F5을 사용했다.
2. 각 일정에 색상을 부여
각각의 일정에 색상 라벨을 부여해주었다.
사실 일정을 추가할 때 색상을 선택할 수 있도록 해주어야 하는데 아직 그 기능을 구현하지 못했다.
스타일부터 적용하고 만들어야지 했다가 결국 내일까지 미뤄지 마법..✨
하지만 state를 사용하면 금방 못 할 것도 없지😆
내일 후다닥 만들어서 적용해주고 싶다.
3. 모달에도 색상 부여
위 일정 색상과 맞춰서 모달에서도 색상을 확인할 수 있도록 만들어 주었다.
어떻게하면 선택한 색상을 살리면서 어두운 느낌을 가져갈 수 있을까 고민했는데, 이 정도면 나쁘지 않은 선택 아닐까...?😇
4. 컴포넌트를 쪼개고 쪼개고 쪼개기
리액트를 사용하다보면 '어떻게 쪼개지?'라는 생각을 네이밍만큼 많이 하게 된다.
쪼개는 방법에 정도는 없다고 한다.
하지만 분명히 효율적인 방법은 분명 있을테니 고민인 것이다.
위 링크의 글에서는 여태까지 사람들이 고민한 흔적들을 찾을 수 있다.
컴포넌트를 도메인 단위로 나누기, Container-Presenter 구조를 사용하기 등 리액트를 더 잘 쓰기 위해 많은 개발자들이 새로운 방법을 고안해 내는 것이다.
하지만 내 몇 번의 리액트 사용 경험, 수 많은 인터넷 상의 개발자들 의견을 종합하면 Atomic Design이 가장 효율적인 디자인 패턴 같다.
저번 단어장을 만들면서는 코드에 관한 고민이 많지 않았다.
전체 코드량도 많지 않고, 컴포넌트도 적었다.
하지만 이번에는 멍하니 코드를 보다가 문득 '더럽다'는 생각이 들었다.
useSelector를 이용해서 불러온 많은 state
styled-components로 만들어놓은 스타일 컴포넌트들
return안에 들어있는 긴 줄의 리액트 요소들
... 등등
Atomic Design에 관한 위 글을 읽으면서야 비로소 제대로 컴포넌트를 나누지 못해서 그렇다는걸 깨달았다.
위 글에 의하면 아토믹 디자인은 아래 다섯 단계로 쪼갤 수 있다.
- Atoms(원자)
- Molecules(분자)
- Organisms(유기체)
- Templates
- Pages
하지만 내가 했던 분리는 최대 분자 수준까지였고,
나머지 데이터와 리액트 요소도 Pages와 Templates에 몰려있었다.
당연히 어지럽고 더러워 보일 수 밖에🤷🏻♀️
그래서 시작했다, 컴포넌트 쪼개기.
원자 수준까지 지금 당장 분리하기에는 과제 제출까지의 시간이 너무 부족할 것 같았다.
또, 더 확장될 프로젝트는 아니기 때문에 Molecules를 Atoms로 쪼개서 재사용성을 확보하는 것이 중요하게 여겨지지는 않았다.
지금 중요한 것은 Pages와 Templates에 몰려있는 state와 리액트 요소를 Orginism과 Molecules 수준으로라도 나누어주는 것이었다.
이건 계속 진행 중인데,
조금이라도 내 코드가 보기 좋아졌으면 좋겠다.
시간이 된다면 프로젝트를 총정리 할 때 코드 리팩토링에 대해서도 자세히 정리하고 싶다.
