우리가 할 첫 번째 일은 모든 Component(와 하위 Component)의 주변에 박스를 그리고 그 각각에 이름을 붙이는 것입니다. 디자이너와 함께 일한다면, 이것들을 이미 정해두었을 수 있으니 한번 대화해보세요! 디자이너의 Photoshop 레이어 이름이 React Component의 이름이 될 수 있습니다.

하지만 어떤 것이 Conponent가 되어야 할지 어떻게 알 수 있을까요? 우리가 새로운 함수나 객체를 만들 때처럼 만드시면 됩니다. 한 가지 테크닉은 단일 책임 원칙 입니다.

이는 하나의 Component는 한 가지 일을 하는 게 이상적이라는 원칙입니다. 하나의 Component가 커지게 된다면 이는 보다 작은 하위 Component로 분리되어야 합니다.

주로 JSON 데이터를 유저에게 보여주기 때문에, 데이터 모델이 적절하게 만들어졌다면, UI(Component 구조)가 잘 연결된 것입니다.

이는 UI와 데이터 모델이 같은 인포메이션 아키텍처를 가지는 경향이 있기 때문입니다.

각 Component가 데이터 모델의 한 조각을 나타내도록 분리해주세요.

다섯개의 Component로 이루어진 앱을 한번 봅시다.

1. FilterableProductTable (노란색) : 예시 전체를 포괄합니다.
2. SearchBar (파란색) : 모든 유저의 입력을 받습니다.
3. ProductTable (연두색) : 유저의 입력을 기반으로 데이터 콜렉션(data collection)을 필터링 해서 보여줍니다.
4. ProductCategoryRow (하늘색) : 각 카테고리의 헤더를 보여줍니다.
5. ProductRow (빨강색) : 각각의 제품에 해당하는 행을 보여줍니다.

• ProductTable을 보면 “Name” 과 “Price” 레이블을 포함한 테이블 헤더만을 가진 Component는 없습니다.이 같은 경우, 데이터를 위한 독립된 Component를 생성할지 생성하지 않을지는 선택입니다.

• 이 예시에서는 ProductTable의 책임인 데이터 컬렉션(data collection)이 렌더링의 일부이기 때문에 ProductTable을 남겨두었습니다. 그러나 이 헤더가 복잡해지면

  (즉, 정렬을 위한 기능을 추가하는 등) ProductTableHeader Component를 만드는 것이 더 합리적일 것입니다.