[dB's 리액트] Universal Routing (라우팅 연결)

Universal Routing
리액트 universal routing은 간단한 미들웨어 스타일 라우터로 isomorphic JavaScript web apps과 single-page 애플리케이션을 위해 제작 되었습니다. 각각의 라우터는 children:[ ] 속성이 있습니다. 이 속성을 사용하여 각각의 path에 따라 보여지는 컴포넌트를 랜더링 할 수 있습니다.

const routes = {
  path: '/admin'
  children: [
    {
      path: '/', action: () => {/* ... */}        // www.example.com/admin
    },
    {
      path: '/users',
      children: [
        {
          path: '/', action: () => {/* ... */}    // www.example.com/admin/users
        },
        {
          path: '/:id', action: () => {/* ... */} // www.example.com/admin/users/123
        }
      ]
    }
  ]
};

아래와 같이 상품리스트 페이지가 있고, 상품리스트 중에서 하나의 상품을 클릭하면 선호도에 대한 상세 페이지로 이동합니다. 상품리스트는 items이며 하나의 상품id를 333으로 하도록 하겠습니다. 즉, 상품리스트는 상위 페이지며 자식 페이지로 남녀선호도, 연령별선호도, 국가별선호도가 위치합니다.

상품리스트 // items
 |_ 남녀선호도 // items/333/gender
 |_ 연령별선호도 // items/333/age
 |_ 국가별선호도 // items/333/nations

export default {
  path: '/items',
  children: [{
    path: '',
    children: [
      items,
    ],
  }, {
    path: '/:itemId',
    children: [
      gender,
      age,
      nations,
    ],
  }],
}

children에 정의된 각각의 라우터는 화면에 보여질 컴포너트를 가지고 있습니다. 예로, ProductItemsLayout은 페이지 전체 공통 레이아웃이며, 그 안에 상품리스트의 부모역할인 ItemsLayout 컴포넌트가 있습니다. ItemsLayout은 현재 path에 따라 보여지는 컴포넌트를 분기처리합니다.

export default {

  path: '/gender',

  async action() {
    return {
      component:
      <ProductItemsLayout>
        <ItemsLayout />
      </ProductItemsLayout>,
    }
  },
}

예를들어, 현재 주소의 마지막 문자열이 nations이면 <nations> 컴포넌트를 랜더링합니다.

class ItemsLayout extends React.Component<Props, any> {
  render() {
    const currentPath = this.props.currentPath || ''
    return (
      <div>
        <Navigation />
        {
        currentPath.endsWith('items') &&
          <Items />
        }
        {
        currentPath.endsWith('gender') &&
          <Gender />
        }
        {
          currentPath.endsWith('age') &&
          <Age />
        }
        {
          currentPath.endsWith('nations') &&
          <Nations/>
        }
      </div>
    )
  }
}

여기서 중요한 것이 <Navigation> 컴포넌트의 역할입니다.

<ul>
  <li>
    <Link to={`/items`}>
      상품리스트
    </Link>
  </li>
  <li>
    <Link to={`/items/${ItemId}/gender`}>
      남녀선호도
    </Link>
  </li>
  <li>
    <Link to={`/items/${ItemId}/age`}>
      연령별선호도
    </Link>
  </li>
  <li>
    <Link to={`/items/${ItemId}/nations`}>
      국가별선호도
    </Link>
  </li>
</ul>