routes 파일 만들기

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="container">
          <Switch>
            <Route path="/movies" exact>
              <Movies />
            </Route>
            <Route path="/users" exact>
              <Users />
            </Route>
            <Route path="/" exact>
              <Home />
            </Route>
          </Switch>
        </div>
      </div>
    </Router>
  );
}

코드가 길어질수록 를 계속 반복해서 사용하게 됩니다. 이런 문제점을 해결하기 위해서 routes 파일을 따로 만들어서 모든 route 객체들을 관리해줍니다.

• routes 파일

import Users from './pages/Users';
import Home from './pages/Home';
import Movies from './pages/Movies';

export default [
    {
        path: '/',
        component: Home
    },
    {
        path: '/movies',
        component: Movies
    },
    {
        path: '/users',
        component: Users
    },
];

각각의 page를 import 하고, 각 route 객체의 path와 component를 routes.js 파일에서 관리해줍니다. route를 추가하고자 하면 routes.js 파일에 route 객체를 추가해주면 됩니다.

import React from 'react';
import Navbar from './components/Navbar';
import routes from './routes';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="container">
          <Switch>
            {routes.map(route => {
              return (
                <Route 
                  key={route.path} 
                  path={route.path} 
                  exact
                >
                  <route.component />
                </Route>
              );
            })}
          </Switch>
        </div>
      </div>
    </Router>
  );
}

export default App;

• 모든 route 리턴

{routes.map(route => {
  return (
    <Route 
      key={route.path} 
      path={route.path} 
      exact
    >
      <route.component />
    </Route>
  );
})}

map() 함수를 사용해서 routes.js 파일의 모든 route를 리턴해줍니다. map() 함수를 사용할 때 key 속성을 사용해주어야 하기 때문에 route.path를 key속성 값으로 설정해줍니다. 컴포넌트의 이름은 route.component 를 사용합니다.

exact 모든 route에 공통적으로 넣어줍니다.

route 추가하기

user route 추가하기

user id에 해당하는 데이터를 보여주는 페이지를 추가하고자 합니다.

import Users from './pages/Users';
import User from './pages/User';
import Home from './pages/Home';
import Movies from './pages/Movies';

export default [
    {
        path: '/',
        component: Home
    },
    {
        path: '/movies',
        component: Movies
    },
    {
        path: '/users',
        component: Users
    },
    {
        path: '/users/:id',
        component: User
    }
];

• user의 id에 따라 다른 세부정보 페이지 보여주기

path: '/users/:id'

콜론(:)을 사용하면 id값으로 다이나믹하게 변수처럼 사용할 수 있습니다. id의 값에 따라 다른 페이지를 보여줍니다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Spinner from '../components/Spinner';
import { useParams } from 'react-router-dom';

const User = () => {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    const { id } = useParams();

    useEffect(() => {
        axios.get('https://jsonplaceholder.typicode.com/users/' + id)
            .then(response => {
                setUser(response.data);
                setLoading(false);
            });
    }, []);

    const userDetail = loading ? <Spinner /> : (
        <div>
            <div>{user.name}</div>
            <div>{user.email}</div>
            <div>{user.phone}</div>
        </div>
    )

    return (
        <>
            <h1>User 정보</h1>
            {userDetail}
        </>
    );
}

export default User;

• useParams() react-router-dom에서 제공하는 함수로 사용자가 입력한 URL parameter의 정보를 줍니다.
  
• id에 따른 user 정보 요청

useEffect(() => {
        axios.get('https://jsonplaceholder.typicode.com/users/' + id)
            .then(response => {
                setUser(response.data);
                setLoading(false);
            });
    }, []);

URL + id에서 각 id에 대한 정보를 get request로 받아오고, response.data로 user값을 변경해줍니다.

• 세부정보 보여주기

const userDetail = loading ? <Spinner /> : (
    <div>
        <div>{user.name}</div>
        <div>{user.email}</div>
        <div>{user.phone}</div>
    </div>
)

response 값이 적절히 들어오면 user의 name, email, phone 정보를 보여줍니다.

• user 이름 클릭 시 세부정보 보여주기(Link)

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

const UserList = ({ users }) => {
    return (
        <div>
            {users.map(user => {
                return (
                    <div className="card mb-2" key={user.id}>
                        <div className="card-body p-3">
                            <Link to={`/users/${user.id}`}>{user.name}</Link>
                        </div>
                    </div>
                );
            })}
        </div>
    );
};

export default UserList;

Link 태그를 이용해서 이름을 클릭했을 때 이동하는 경로를 id값에 따른 url로 지정하여 연결시켜줍니다. map() 함수를 사용하므로 모든 id에 대한 url로 연결됩니다.