React는 Javascript로 규모가 크고 빠른 웹 애플리케이션을 만드는 가장 좋은 방법이다. React는 Facebook과 Instagram을 통해 확장성을 입증 했다.

React의 가장 멋진 점 중 하나는 앱을 설계하는 방식이다. 이 문서를 통해 React로 상품들을 검색할 수 있는 데이터 테이블을 만드는 과정을 함께 생각해보자.

목업으로 시작하기

JSON API와 목업을 디자이너로부터 받았다고 가정해 보자. 목업은 다음과 같은 형태를 가지고 있다.

JSON API는 아래와 같은 데이터를 반환한다.

[
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

1단계: UI를 컴포넌트 계층 구조로 나누기

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

하지만 어떤 것이 컴포넌트가 되어야 할 지 어떻게 알 수 있을까? 우리가 새로운 함수나 객체를 만들 때처럼 만들면 된다. 한 가지 테크닉은 단일 책임 원칙이다. 이는 하나의 컴포넌트는 한 가지 일을 하는게 이상적이라는 원칙이다. 하나의 컴포넌트가 커지게 된다면 이는 보다 작은 하위 컴포넌트로 분리되어야 한다.

주로 JSON 데이터를 유저에게 보여주기 때문에, 데이터 모델이 적절하게 만들어졌다면, UI(컴포넌트 구조)가 잘 연결될 것이다. 이는 UI와 데이터 모델이 같은 인포메이션 아키텍처를 가지는 경향이 있기 때문이다. 각 컴포넌트가 데이터 모델의 한 조각을 나타내도록 분리해주자.

다섯개의 컴포넌트로 이루어진 앱을 한번 보자. 각각의 컴포넌트에 들어간 데이터는 이탤릭체로 표기하였다.