노마드 코더 React JS: React Router, Parameters

출처 : https://nomadcoders.co/

노마드 코더 Nomad Coders

 

---

 

 

React Router

핵심 :React Router에 대해서 알아본다.

 

 

. Switch의 역할은 Route를 찾는 것인데 Route는 URL을 의미한다. Switch는 URL을 찾으면, 컴포넌트를 렌더링한다.

또한 Switch는 한번에 Route 하나만 렌더링 되게 해준다.

 

 

 

1. BrowserRouter 방식

function App() {
  return (
  <Router>
    <Switch>
       {/* 유저가 해당 경로에 있다면, Detail를 렌더링 해준다는 뜻*/}
      <Route path="/movie">
        <Detail />
      </Route>
      {/* 유저가 해당 경로에 있다면, Home Route를 렌더링 해준다는 뜻*/}
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </Router>);
};

 

. 즉 위의 코드를 통해서 알 수 있는 것은 주소가 "~/movie"이면 Detail 컴포넌트를 렌더링해주고,

주소가 "~/"이면 Home 컴포넌트를 렌더링해준다는 뜻이다.

 

 

. 한 Route에서 다른 Route로 이동하는 방법

흔히들 HTML의 a태그의 href 속성을 가장 먼저 생각하고, 실제로도 그렇게 코드를 작성하면 이동이 가능하다. 그러나 a태그의 href 속성은 페이지 전체가 새로고침되기 때문에 리액트의 장점을 깎아먹는다. 
따라서 페이지 전체가 새로고침되는 것을 막기 위해 react-router-dom에서 import한 Link 태그를 사용하면 된다.

 

import {Link} from "react-router-dom";


        <h2>
            <Link to="/movie">{title}</Link>
        </h2>

영화 제목 클릭 후 /movie로 이동함

 

 

 

 

 

---

 

 

Parameters

핵심 : 동적 URL에 대해서 알아본다.

 

 

 

. React Router은 다이나믹(동적) url을 지원해준다. 동적이다는 뜻은 url에 변수를 넣을 수 있다는 의미이다.

 

App.js

      <Route path="/movie/:id">

 

Movie.js

            <Link to={`/movie/${id}`}>{title}</Link>

 

 

 

 

url에 변수(movie.id)가 들어간 모습

 

.  그러면 위의 id값이 뭔지 어떻게 알아낼까?

useParams() 함수는 url에 있는 변수를 반환해주는 함수이다.

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

function Detail() {
    const x = useParams()
    console.log(x)
    return <h1>Detail</h1>
}

url에 있는 변수값을 반환해준다.

url 변수 사용 순서

1. React Router에게 이 url이 변수를 받을 것이라고 말해준다.

      <Route path="/movie/:id">

 

2. 해당 Route의 컴포넌트에서 useParams 함수를 사용한다.

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

function Detail() {
    const { id } = useParams()
    return <h1>Detail</h1>
}

export default Detail;

 

 

. 우리가 받은 url 변수값을 이용해서 API에게 요청보내기

즉 url 변수(id)를 통해서 해당 url에 대해 API에게 데이터를 요청할 수 있다.

import { useEffect } from "react";
import { useParams } from "react-router-dom"; 

function Detail() {
    const { id } = useParams()
    const getMovie = async()=> {
        const json = await(
            await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`))
        .json();
        console.log(json);

    };
    useEffect(() => {
        getMovie()
    }, [])
    return <h1>Detail</h1>
}

export default Detail;

 

. async와 await이란?
async는 promise의 코드를 깔끔하게 줄여주기 때문에 가독성을 높혀주는 효과가 있다. 사용법은 function 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에 await만 붙여주면 된다. 그리고 한가지 알아둬야 할 점은 await 뒤에 오는 부분은 반드시 promise를 반환해주어야 하고, async가 붙은 function도 promise를 반환해야 한다는 점이다. 

 

 

 

 

 

---

 

 

핵심 요약

0. Switch의 역할은 Route를 찾는 것인데 Route는 URL을 의미한다. Switch는 URL을 찾으면, 컴포넌트를 렌더링한다.

또한 Switch는 한번에 Route 하나만 렌더링 되게 해준다.

 

1. 더이상 Switch는 쓰이지 않는다. 이제 그역할은 Routes가 대신할 것이다 (공식문서 참조), 또한 Route 태그의 exact 속성도 더이상 쓰이지 않으며 Routes가 알아서 최적의 경로배정을 해주기 때문에 Switch를 썼을 때의 고민을 말끔히 해결해 준다

 

2. BROWSER Router가 현재 사용되는 일반적인 방식이고, HASH Router는 뒤에 #(해쉬)가 붙으므로 잘 쓰이진 않는다

 

3. 한 Route에서 다른 Route로 이동하는 방법

흔히들 HTML의 a태그의 href 속성을 가장 먼저 생각하고, 실제로도 그렇게 코드를 작성하면 이동이 가능하다. 그러나 a태그의 href 속성은 페이지 전체가 새로고침되기 때문에 리액트의 장점을 깎아먹는다. 
따라서 페이지 전체가 새로고침되는 것을 막기 위해 react-router-dom에서 import한 Link 태그를 사용하면 된다.

 

4. React Router은 다이나믹(동적) url을 지원해준다. 동적이다는 뜻은 url에 변수를 넣을 수 있다는 의미이다.

 

5. useParams() 함수는 url에 있는 변수를 반환해주는 함수이다.

 

6. 우리가 받은 url 변수값을 이용해서 API에게 요청보내기
즉 url 변수(id)를 통해서 해당 url에 대해 API에게 데이터를 요청할 수 있다.