<React> react router dom - Link to(Object)

이번 시간에는 Link to(Object) 설명을 위해 user detail페이지를 보여주는 작은 project를 생성해보겠습니다.

project

project
 +|--src
  +|--user.jsx
  +|--home.jsx
  *|--app.jsx
    

app.jsx

Home 화면을 보여줄지 User detail화면을 보여줄지 결정하는 커맨드 센터 역할을 하게 됩니다. Home에 전달한 props로 user Object가 담긴 users array가 있다고 생각해주세요. 현재 아래 코드에 users를 받아오는 부분은 생략되어 있습니다.

• Route path :id
  :를 붙여주면 변수가 들어갈 자리로 인식합니다.

import React from 'react';
import Home from './Home';
import User from './User';
import {
  HashRotuer as Router,
  Route
} from 'react-router-dom';

class App extend React.Component{
  render(){
    const {users} = this.state;
    return (
      <Router>
        <Route path = "/" exact={true}>
          <Home users={users} />
        </Route>
        <Route path = "/user/:id" component ={User} />
      </Router>
  );
  }
}

home.jsx

작성하고 보니 굳이 class Component로 작성할 필요는 없었다는 생각이 듭니다. 양해하고 봐주세요. home.jsx에서는 각 user의 이름마다 user-detail로 이동하는 link를 달아준 상황입니다.

import React from 'react';
import {
  Link
} from 'react-router-dom';

function Home(props){
    const {users} = props;
    return (
        {
          users.map(user => {
            return (
              <Link to={{
                pathname:`/user/${user.id}`,
                state:{
                age: user.age,
                name: user.name,
                blog: user.blog
              }}>
      		{user.name}
 	      </ Link>
            );
          });
        }
    );
}

user.jsx

User Component로 react-router-dom에 의해 전달된 state는 User Component의 props에서 확인할 수 있습니다. User Component의 props에서 {loacation:{state}}에 담겨 있습니다.

import React from 'react';

function User({location:{state}}){
  const {name, age, blog} = state;
  return (
    <div className="user-detail">
      <h3>{name}</h3>
      <h3>{age}</h3>
      <h3>{blog}</h3>
    </div>
  );
}

export default User;

이렇게 해서 간략히 Link to(Object)를 이용해서 Component에 원하는 정보를 전달하는 방법을 공부해봤습니다.