1️⃣ 컴포넌트 재사용성
하나의 컴포넌트를 여러 위치에서 반복적으로 사용할 수 있도록 만드는 것
버튼, 카드, 모달 창과 같은 UI 요소로 구성, 재사용 가능한 컴포넌트는 중복 코드를 줄이고 유지 보수를 쉽게 만들어 줌
장점
- 개발 효율성
비슷한 기능을 가진 컴포넌트를 새로 작성하지 않아도 됨
중복 코드 ⬇️ - 유지보수 용이성
코드 가독성 ⬆️
기능 개선 및 에러 수정이 쉬움 - 일관성 있는 UI/UX
동일한 컴포넌트를 사용하면 일관성 있는 화면을 만드는 데 도움 됨
안정적이고 직관적인 인터페이스 제공 - 확장성
새로운 기능 및 요구 사항이 생겨도 손쉽게 확장 가능 - 개발 속도 향상
이미 만들어진 컴포넌트를 조합하여 새로운 프로젝트에 사용 가능
2️⃣ 재사용 가능한 컴포넌트를 설계하는 방법
단일 책임 원칙
- 하나의 컴포넌트는 한 가지 역할에 집중
- 버튼 컴포넌트는 ‘클릭’이라는 기능에 집중하고,
모양이나 스타일은 외부에서 설정할 수 있도록 분리
유연한 props 설정
- props를 사용해 컴포넌트가 다양한 상황에 맞게 동작하도록 작성
- 버튼 컴포넌트의 경우 색상, 크기, 클릭 이벤트 등을 props로 받아
다양한 방식으로 렌더링할 수 있도록 설계
스타일 분리
- 스타일을 컴포넌트 내부에 하드코딩하는 대신, 외부 스타일시트나 스타일 라이브러리를 활용해 재사용성을 높임
- CSS-in-JS 라이브러리인 styled-components 등을 활용하여 컴포넌트 스타일 재활용
주요 설계 패턴
- 합성 컴포넌트 패턴
- 아토믹 디자인 방법론
- Presentational and Container Pattern
3️⃣ Atomic Design Methodology
- 컴포넌트의 재사용성을 높이기 위한 디자인 시스템
- 원자가 모여 분자를 형성하고, 분자가 모여 복잡한 유기체를 생성하는 것처럼,
화학적 원리에서 개념을 빌려와 컴포넌트를 5가지 단계로 나눔
Atom
- 더 이상 분해할 수 없는 기본적인 컴포넌트
- labels, inputs, buttons 등과 같은 기본 HTML 요소가 포함됨
Molecule
- label, search input, button을 결합하여 검색 form을 만들 수 있음
- 여러 개의 atom을 결합하여 새로운 특성을 가짐
- 하나의 molecule은 한 가지 일을 함 (단일 책임 원칙)
Organism
- header = logo (atom)+ navigation (molecule) + search form (molecule)
- molecules, atoms, organisms 등으로 구성된 비교적 복잡한 구성 요소
- atoms, molecules에 비해 상대적으로 재사용성이 낮아짐
Template
- 여러 개의 molecules, organisms 등으로 구성
- 페이지의 기본 콘텐츠 구조
Page
- 페이지의 실제 콘텐츠가 적용된 UI를 보여줌
- 사용자가 실제로 경험하는 가장 구체적인 단계
참고
https://javascript.plainenglish.io/create-reusable-react-components-the-right-way-c9b42578a187
https://www.pumpkiinbell.com/blog/react/reusable-components
https://atomicdesign.bradfrost.com/chapter-2/
https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/