리액트 라우터(React Router) 사용법(3)

페이지 주소를 설정할 때 유동적인 값을 사용할 때가 많습니다.

일반적으로 다음과 같이 두가지 형태로 사용합니다.

• URL 파라미터 : 주소의 경로에 유동적인 값을 넣는 형태
  주로 ID 또는 이름을 사용하여 특정 데이터를 조회할 때 사용
• 쿼리스트링 : 주소의 뒷부분에 "?" 문자열 이후에 key=value 로 값을 정의하며 "&" 로 구분하는 형태
  키워드 검색, 페이지네이션, 정렬방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용

1. URL 파리미터

    이를 사용하기 위해 새로운 페이지 컴포넌트로 Profile 컴포넌트를 만듭니다.
    URL 파라미터는 useParams 라는 Hook을 사용하여 객체 형태로 조회할 수 있습니다.
    URL 파미미터의 이름은 라우트 설정을 할 때 Route 컴포넌트의 path props를 통해 설정합니다.
    username 이라는 URL 파라미터를 통해 프로필을 조회한 뒤에 프로필이 존재하지 않으면 '존재하지 않는 프로필입니다'
    라는 문구를 보여주고 존재한다면 프로필 정보를 보여주도록 로직을 작성합니다.

import { useParams } from 'react-router-dom';

const data = {
  velopert: {
    name: '김민준',
    description: '리액트를 좋아하는 개발자',
  },
  gildong: {
    name: '홍길동',
    description: '고전 소설 홍길동전의 주인공',
  },
};

const Profile = () => {
  const params = useParams();
  const profile = data[params.username];

  return (
    <div>
      <h1>사용자 프로필</h1>
      {profile ? (
        <div>
          <h2>{profile.name}</h2>
          <p>{profile.description}</p>
        </div>
      ) : (
        <p>존재하지 않는 프로필입니다.</p>
      )}
    </div>
  );
};

export default Profile;

 App.js 도 새로운 라우터를 설정합니다.

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/profiles/:username" element={<Profile />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

 URL 파라미터는 /profiles/:username 과 같이 경로에 ":" 를 사용하여 설정합니다. 만약 URL 파라미터가 여러 개인 경우
/profiles/:username/:field 와 같은 형태로 설정하면 됩니다.

 

프로파일 페이지로 이동할 수 있도록 Home.js 에 Link 를 추가합니다.

링크가 많아져서 ul, li 태그를 사용하여 리스트로 보여줍니다.

const Home = () => {
  return (
    <div>
      <h1>홈</h1>
      <p>힘이나는 코딩 홈 페이지 입니다.</p>
      <ul>
        <li>
          <Link to="/about">소개</Link>
        </li>
        <li>
          <Link to="/profiles/velopert">velopert의 프로필</Link>
        </li>
        <li>
          <Link to="/profiles/gildong">gildong의 프로필</Link>
        </li>
        <li>
          <Link to="/profiles/void">존재하지 않는 프로필</Link>
        </li>
      </ul>
    </div>
  );
};

결과로 표출되는 웹페이지는 다음과 같습니다.