13.4.1 URL 파라미터

    Profile 페이지에서 파라미터를 사용해 봅시다. /profile/velopert와 같은 형식으로 뒷부분에 유동적인 username 값을 넣어 줄 때 해당 값을 props로 받아 와서 조회하는 방법을 알아보겠습니다.

    Profile이라는 컴포넌트를 다음과 같이 만들어 보세요.

    Profile.js

    import React from 'react';
     
    const data = {
      velopert: {
        name: '김민준',
        description: '리액트를 좋아하는 개발자'
      },
      gildong: {
        name: '홍길동',
        description: '고전 소설 홍길동전의 주인공'
      }
    };
     
    const Profile = ({ match }) => {
      const { username } = match.params;
      const profile = data[username];
      if (!profile) {
        return <div>존재하지 않는 사용자입니다.</div>;
      }
      return (
        <div>
          <h3>
            {username}({profile.name})
          </h3>
          <p>{profile.description}</p>
        </div>
      );
    };
     
    export default Profile;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.