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

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

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

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

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

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

Untitled

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

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