React Path Parameter, useParams

백엔드가 넘겨주는 API주소랑 브라우저 URL 주소랑 다른 개념이다.

백엔드 API
<https://jsonplaceholder.typicode.com>

브라우저 URL

라우팅은 다른 경로(url 주소)에 따라 다른 뷰를 보여준다.

리액트는 SPA이다 즉 경로로 이동한다고해서 페이지 전체를 새로고침하지 않는다. 하지만 리액트에는 라우팅 기능이 자체 내장되어 있지 않아 react-router-dom이라는 라이브러리를 통해 라우팅을 할 수 있다.

ReactDOM.render(<Router />, document.getElementById("root"));

<BrowserRouter>
  <Nav />
  <Routes>
    <Route path="/" element={<Main />} />
    <Route path="/detail" element={<Detail />} />
  </Routes>
  <Footer />
</BrowserRouter>

여기까지는 정적 라우팅이다. 만약 우리가 보여주어야할 뷰가 10개라면 100개라면? Route를 쭈루룩 만들어줘야할 것이다.

<BrowserRouter>
  <Nav />
  <Routes>
    <Route path='/' element={<Main />} />
    <Route path='/detail' element={<Detail />} />
    // 100개의 Route??
  </Routes>
  <Footer />
</BrowserRouter>;

그러나 우리는 100개의 Route를 만들어 내는 것이 아니라 패스 파라미터와 쿼리 파라미터를 통해 간단하게 한 줄로 해결해줄 수 있다.

패스 파라미터

♣️ : 는 이 뒤로 패스 파라미터가 올 것임을 의미한다.

♣️ id 는 해당 패스 파라미터의 이름을 의미, 변수 명을 짓듯이, 임의의 이름을 지정해줄 수 있다.

우선 왓챠피디아를 예로 들어보자. 하지만 왓챠피디아는 영화 상세 페이지를 패스 파라미터를 사용했는지는 알 수 없다.. 그냥 설명 예시만 해본다!

https://pedia.watcha.com/ko-KR/

이 영화 리스트들은 클릭하는 즉시 상세 페이지로 이동한다. 만약 정적 라우팅을 사용한다면 각 영화에 아이디 값이 존재한다는 전제로 개발자가 Router.js에 이렇게 만들어 둘 것이다.

<BrowserRouter>
  <Nav />
  <Routes>
    <Route path='/' element={<Main />} />
    <Route path='/detail/1' element={<Detail />} />
    <Route path='/detail/2' element={<Detail />} />
    <Route path='/detail/3' element={<Detail />} />
    <Route path='/detail/4' element={<Detail />} />
    <Route path='/detail/5' element={<Detail />} />
  </Routes>
  <Footer />
</BrowserRouter>;

하지만 영화가 5개일리 없고.. 몇 개일지는 아무도 모른다. 계속 추가되기 때문에 정적으로 만들어둘 수 없다.

그럼 패스 파라미터를 사용해보자. 다시 Router.js로 돌아와서 패스 파라미터를 영화의 id값으로 설정해주자.

<BrowserRouter>
  <Nav />
  <Routes>
    <Route path="/" element={<Main />} />
    <Route path="/detail/:filmsId" element={<Detail />} />
  </Routes>
  <Footer />
</BrowserRouter>

설정했다면 :filmsId 이 단어는 해당 영화의 Id값이 들어가게 된다. 매개변수 처럼 말이다.

브라우저 URL이 이렇게 될 것이다! http://localhost:3000/detail/1

하지만 선행되어야할 것은 먼저 그 페이지로 이동하는 것이다. 페이지로 이동해야 해당 URL의 매개 변수 값을 불러올 수 있다.

1. 메인페이지에서 useNavigate를 통해 상세 페이지로 이동시켜 보자. 이동할 URL의 주소는 백앤드의 API주소로부터 불러온 영화의 Id값을 넣어준다. 문자열에 변수를 사용하기 위해서는 템플릿 리터럴이라는 ES6문법을 사용하자. 사용법은 백틱을 사용하고 문자열을 기입하다가 변수가 들어갈 자리만 ${변수}를 해주면 된다.

const navigate = useNavigate();
const goToDetail = () => {
    navigate(`/detail/${id}`);
  };

1. 상세 페이지에서는 백앤드 API 전체를 불러오는 것이 아니라 endpoint를 지정해서 해당 id에 해당하는 영화의 데이터만 불러와야한다. users/ 가 바로 endPoint다. endPoint를 잘모르겠다면 해당 API를 복사해서 브라우저의 URL주소창에 입력해보자. 그럼 데이터가 어떻게 생겼는지 볼 수 있다.

<https://jsonplaceholder.typicode.com/users/1>

fetch(`https://jsonplaceholder.typicode.com/users/`)

1. 다음은 useParams를 통해 내가 이동한 페이지의 매개변수 값이 어떻게 생겼는지 체크해보자.

const params = useParams();

console.log('params', params);
console.log('params.filmsId', params.filmsId);

매개 변수 값은 객체 데이터 타입으로 읽을 수 있고, 그 데이터의 키에 접근하게되면 해당 영화의 id값을 불러올 수 있다. 이것을 통해서 백앤드 API로부터 데이터를 받아올 때 영화의 Id에 대한 데이터만 불러와서 state에 저장해보자

useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${params.filmsId}`)
      .then(res => res.json())
      .then(setFilmsData);
  }, []);

여기까지 하면 해당 영화에 해당하는 id값에 따라 데이터를 불러 올 수 있게된다.