React는 앱을 디자인 하고, 빌드하는 생각을 바꿀 수 있습니다. 디자인 시스템을 구축하고 UI를 선언형으로 생각하고 구현할 수 있게 합니다. React를 사용해 검색 가능한 제품 데이터 테이블을 구축해봅니다.

• 목차

실습 준비

JSON 포멧으로 응답하는 API 서버와 디자이너가 작업한 디자인 목업이 제시되었다고 생각해봅시다. API 서버로부터 응답받는 JSON 데이터는 다음과 같습니다.

[
  { "category": "과일", "price": 1920, "stocked": true, "name": "사과" },
  { "category": "과일", "price": 1640, "stocked": true, "name": "두리안" },
  { "category": "과일", "price": 2480, "stocked": false, "name": "아보카도" },
  { "category": "채소", "price": 1700, "stocked": true, "name": "시금치" },
  { "category": "채소", "price": 2800, "stocked": false, "name": "호박" },
  { "category": "채소", "price": 1330, "stocked": true, "name": "완도콩" }
]

디자이너가 제작한 목업 디자인은 다음과 같습니다.

React를 사용해 UI를 빌딩하려면 일반적으로 동일한 5단계를 따릅니다.

1단계 ⌁ UI를 컴포넌트 트리로 구성하기

디자인 목업을 구성하는 컴포넌트를 구분해 나누고 적절한 이름을 부여하는 것에서 시작합니다. 개발을 이해하는 디자이너와 함께 작업할 경우, 디자인 시안 파일에 각 컴포넌트의 이름이 부여되어 있을 수도 있습니다.

이상적인 컴포넌트 설계(design)는 한가지만 책임(단일 책임 원칙) 지고 처리하도록 만드는 것입니다. 만약 한가지 이상의 처리가 필요해진다면 컴포넌트를 더 작은 컴포넌트로 나눠 구성해야 합니다.