여기서는 state같은 동적인 상태를 제외하고 정적인 화면을 구현한다.

페이지 방식 개발의 퍼블리싱에 해당한다고 보면 된다.

Step1 – UI를 컴포넌트로 분해

먼저 화면을 재사용할 수 있는 컴포넌트 단위로 쪼갠다.

Single Responsibility Principle 원칙에 기반하여 컴포넌트는 하나의 책임을 가질때까지 작게 쪼갠다. 색깔별로 다음과 같이 5가지 종류의 컴포넌트로 나눈다.

  1. FilterableProductTable (orange): contains the entirety of the example
  2. SearchBar (blue): receives all user input
  3. ProductTable (green): displays and filters the data collection based on user input
  4. ProductCategoryRow (turquoise): displays a heading for each category
  5. ProductRow (red): displays a row for each product

전체 계층 구조는 다음과 같다.

  • FilterableProductTable
    • SearchBar
    • ProductTable
      • ProductCategoryRow
      • ProductRow
      • ProductRow
      • ProductRow
      • ProductCategoryRow
      • ProductRow
      • ProductRow
      • ProductRow

먼저 components 폴더를 만들고 5가지 컴포넌트를 먼저 만든다.

Step2 – 정적인 화면 구성

컴포넌트를 먼저 만든후 각 컴포넌트별로 정적인 화면을 만든다.

App.tsx은 다음과 같다.

FilterableProductTable.tsx

SearchBar.tsx

ProductTable.tsx

ProductCategoryRow.tsx

ProductRow.tsx

만들어진화면을 확인해보자.

Step3 – props를 이용한 정적인 화면 구성

json 데이터를 최상위 컴포넌트에 주입하고 그 데이터를 자식 컴포넌트에 전달해서 화면을 구성한다.

Array 안의 json object를 먼저 타입스크립트로 정의한다.

dto폴더를 만들고 Product.ts 화일을 만든다.

FilterableProductTable에 Json Array를 정의하고 타입을 명시한다.

그리고 products 라는 property로 데이터를 주입할려니 타입스크립트에서 에러가 발생한다. 타입스크립트로 개발시에는 property로 주입하기 위해서는 반드시 타입을 정의해야 한다.

ProductTable.tsx에서 Props를 정의한다. 여기에 products 속성을 추가해야 한다.

이제 ProductTable에서 products를 받아서 ProductCategoryRow와 ProductRow를 구현한다.

lodash 라이브러리가 필요하므로 먼저 인스톨한다. lodash와 타입스크립트를 정의한 @types/lodash 두개를 인스톨한다.

먼저 category로 분류를 한다. groupBy 함수를 사용하면 리턴되는 타입은 객체이다. 그리고 객체의 키에 분류된 객체들이 array로 들어가 있으므로 객체를 루프돌리면 해당하는 컴포넌트들을 생성한다.

ProductCategoryRow, ProductRow에 property를 각각정의한다.

화면에 json 데이터들이 나오는지 확인한다.

이제 재고가 없는 경우에 빨간색으로 표시하도록 한다.

먼저 필요한 모듈들을 설치한다.

classnames 는 클래스를 동적으로 바인딩하기 위해서 필요한다.

그리고, scss를 사용하기 위해서 node-sass도 인스톨한다.

ProductRow.module.scss 화일을 추가한다.

재고가 없는 경우 빨간색으로 표시되는지 확인한다.