React로 사고하기

원문 https://ko-react-exy5xcwjj-fbopensource.vercel.app/learn/thinking-in-react

Step 1: UI를 컴포넌트 계층으로 쪼개기

디자인을 컴포넌트로 나누는 방법은 **배경(프로그래밍, CSS, 디자인, 데이터 모델)**에 따라 달라질 수 있습니다.

1️⃣ 먼저, 모든 컴포넌트와 하위 컴포넌트를 식별

• 디자인 시안에서 컴포넌트별로 박스를 그리고 이름을 붙이기
• 디자이너가 이미 설정한 컴포넌트 명칭이 있을 수 있으니 확인해보기

2️⃣ 컴포넌트 분리 관점

• 프로그래밍: 단일책임 원칙을 적용하여 컴포넌트는 한 가지 역할만 수행하도록 설계
• CSS: 클래스 선택자와 스타일 구조를 고려하여 분리
• 디자인: 디자인 계층을 어떻게 나눌지 결정
• 데이터 모델: 잘 구조화된 JSON을 활용하면 UI와 데이터 모델이 자연스럽게 대응됨

결론적으로, UI를 컴포넌트로 분리하고, 데이터 모델과 매칭될 수 있도록 설계하는 것이 핵심입니다.

1. FilterableProductTable(회색): 예시 전체를 포괄합니다.
2. SearchBar(파란색): 사용자의 입력을 받습니다.
3. ProductTable(라벤더색): 데이터 리스트를 보여주고, 사용자의 입력을 기반으로 필터링합니다.
4. ProductCategoryRow(초록색): 각 카테고리의 헤더를 보여줍니다.
5. ProductRow(노란색): 각각의 제품에 해당하는 행을 보여줍니다.