[React] 서브라우트

 

서브 라우트는, 라우트 내부의 라우트를 만드는것을 의미합니다. 컴포넌트를 만들어서 그 안에 또 Route 컴포넌트를 렌더링하시면 됩니다.

서브 라우트 만들어보기

한번 Profiles 라는 컴포넌트를 만들어서, 그 안에 각 유저들의 프로필 링크들과 프로필 라우트를 함께 렌더링해보겠습니다.

 

src/Profiles.js

import React from "react";
import Profile from "./Profile";
import { Link, Route } from "react-router-dom";

function Profiles() {
  return (
    <div>
      <h3>사용자 목록</h3>
      <ul>
        <li>
          <Link to="/profiles/meanbymin">meanbymin</Link>
        </li>
        <li>
          <Link to="/profiles/homer">homer</Link>
        </li>
      </ul>

      <Route
        exact
        path="/profiles"
        render={() => <div>사용자를 선택해주세요</div>}
      />
      <Route path="/profiles/:username" component={Profile} />
    </div>
  );
}

export default Profiles;

위 코드에서 첫번째 Route 컴포넌트에서는 component 대신에 render 가 사용되었는데요, 여기서는 컴포넌트가 아니라, JSX 자체를 렌더링 할 수 있습니다. JSX 를 렌더링하는 것이기에, 상위 영역에서 props 나 기타 값들을 필요하면 전달 해 줄 수있습니다.

그 다음, App 에서 Profiles 를 위한 링크와 라우트를 생성해주겠습니다 (기존 Profiles 라우트는 제거합니다.)

src/Profile.js

import React from "react";

const profileData = {
  meanbymin: {
    name: "오석민",
    description: "Frontend Engineer",
  },
};

function Profile({ match }) {
  const { username } = match.params;
  const profile = profileData[username];

  if (!profile) return <div>존재하지 않는 사용자입니다.</div>;
  return (
    <div>
      <h3>
        {username} ({profile.name})
      </h3>
      <p>{profile.description}</p>
    </div>
  );
}

export default Profile;

 

이렇게하면 '사용자를 선택해주세요' 라고 렌더링 하는 부분에 컴포넌트를 가져와서 사용할 수 있는 장점들이 생깁니다.

 

 이렇게 서브라우트는 서비스에서 특정 라우트 내에 탭 기능을 만들게 될 때 많이 사용하게 되는데요, 단순히 state로 관리하는 것 보다 서브 라우트로 관리하는 것을 좋습니다. setState 같은것을 할 필요도 없고, 링크를 통하여 다른 곳에서 쉽게 진입시킬 수 있고, 검색엔진 크롤링까지 고려한다면, 검색엔진 봇이 더욱 다양한 데이터를 수집해 갈 수 있기 때문입니다.