React 리스트 필터링 앱 만들어보기

React 앱 만들기 튜토리얼

React는 JavaScript로 규모가 크고 빠른 웹 애플리케이션을 만드는 좋은 선택지 중에 하나로, 이미 FacebookInstagram을 통해 확장성을 입증했습니다.

React의 최대 장점 중에 하나는 앱을 설계하는 방식인데, React로 상품들을 검색할 수 있는 데이터 테이블을 만드는 과정을 통해 알아보겠습니다. 디자이너로 부터 전달받은 목업과 JSON API 데이터는 다음과 같습니다.

리스트 디자인 Mock up
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를 컴포넌트 계층 구조로 나누기

우선은 첫 번째로 모든 컴포넌트와 하위 컴포넌트의 주변에 박스를 그리고 그 각각에 이름을 붙이는 것이 도움이 되는데, 하나의 컴포넌트는 한 가지 일을 하는 것이 이상적이고, 하나의 컴포넌트가 커지게 된다면 이는 보다 작은 하위 컴포넌트로 분리해 주는 것이 좋습니다.

리스트형 애플리케이션은 주로 JSON 데이터를 유저에게 보여주기 때문에, 데이터 모델이 적절하게 만들어져야 하는데, UI와 데이터 모델은 같은 인포메이션 아키텍처를 가지는 경향이 있습니다.

컴포넌트의 구조 설계

위 이미지와 같이 이번에 만들어 볼 앱은 다섯개의 컴포넌트로 이루어져 있는데, 각각의 컴포넌트의 역할은 다음과 같습니다.

  • FilterableProductTable: 예시 전체를 포괄함
  • SearchBar: 모든 유저의 입력을 받음
  • ProductTable: 유저의 입력을 기반으로 데이터 콜렉션을 필터링해서 보여줌
  • ProductCategoryRow: 각 카테고리의 헤더를 보여줌
  • ProductRow: 각각의 제품에 해당하는 행을 보여줌

ProductTable을 보면 NamePrice 레이블을 포함한 테이블 헤더만을 가진 컴포넌트는 없는데, 이런 경우 데이터를 위한 독립된 컴포넌트를 생성할지 말지는 선택할 수 있습니다. 여기서는 ProductTable의 책임인 데이터 컬렉션이 렌더링의 일부이기 때문에 ProductTable을 남겨뒀는데, 이 정렬 기능 등으로 인해 헤더가 복잡해지면 ProductTableHeader 컴포넌트를 만드는 것이 더 합리적일 수 있습니다.

목업의 컴포넌트를 계층 구조로 나타내면 다음과 같습니다.

컴포넌트의 계층 구조
FilterableProductTable
    └ SearchBar
    └ ProductTable
        └ ProductCategoryRow
        └ ProductRow

2단계: React로 정적인 버전 만들기

컴포넌트 계층구조를 만들었다면, 데이터 모델을 가지고 UI를 렌더링은 되지만 아무 동작도 없는 정적인 버전을 만들어 볼 필요가 있는데, 빠르게 UI를 구현해 볼 수 있다는 장점이 있습니다.

데이터 모델을 렌더링하는 앱의 정적 버전을 만들기 위해서는 다른 컴포넌트를 재사용하는 컴포넌트를 만들고 props를 이용해 데이터를 전달해줘야 하는데, props는 부모가 자식에게 데이터를 넘겨줄 때 사용할 수 있는 방법입니다.

답글 남기기