아토믹 디자인, 컴포넌트 주도 개발

소개

React의 기초와 실무의 파일트리를 배우고자 책을 구매하였다.

파일트리

해당 교재에서는 컴포넌트나 페이지를 만들때 폴더의 이름을 먼저 짓고 파일명을 index로 통일시키는 방식으로 파일트리를 작성했다.
Next.js Page Router의 구조와 흡사해 흥미로웠다.

스토리북

Storybook은 컴포넌트 단위의 UI 개발 환경을 지원하는 도구이다.
각 컴포넌트를 일일이 기록하면서 보다 협업하기 쉽게 만든것이라고 보면 된다.

카테고리, 컴포넌트의 Props, Context나 Router 까지 적용하여 기록할 수 있다.
하나하나 작성하면 굉장히 견고한 제품을 만들 수 있을것이나 생성, 수정에 시간이 배 이상 걸려 생산성은 낮아질거 같다는 느낌을 받았다.

프리뷰 페이지와 빌드 화면이 다르기에 .storybook 내부에 css 파일을 만들거나 별도의 저장이 필요하다.

아토믹 디자인

아토믹 디자인은 가능한한 컴포넌트를 작은 단위로 쪼개는것을 의미한다.
Atom, Molecule, Organism, Template, Page 단위로 점점 커진다.

간단한 토이프로젝트를 만들어봤는데 가능한한 잘게 쪼개자니 컴포넌트가 너무 많이 늘어나는데다 Props Driling이 너무 심해졌다.

예를들어 로그인 및 회원가입 화면을 만들때 Atom으로는 Input, Label을 각 각 따로 만들고
Molecule 에선 이 둘의 컴포넌트를 불러와 하나의 컴포넌트로 만든다.
이렇게 되면 Molecule에서 Input에 적용할 onChange, value 값 등을 받아와야 한다.

이후 Organism 컴포넌트를 만들고 Template에서 이를 사용하려면 4번의 props driling이 발생한다.

후기

현업에서 쓰이는 파일트리, Eslint, Prettier 커스텀, 컴포넌트 주도 개발, 아토믹 디자인, StoryBook에 대해 배웠다.

극한의 쪼개기를 통해 Context API, 상태관리의 중요성을 인지하게 되었다.

이외에 React의 특징, Class형 컴포넌트에 대해서도 간략하게 배울 수 있었다.

StoryBook은 레거시 버전을 다뤘던지라 storybook 사이트에서 제공하는 document를 읽으면서 공부하였다.