[React / Node.js] react-router 리액트 라우터 알아보기

 

react-router

    라우팅 : 다른 주소에 따라 다른 뷰를 보여주는 것   

    리액트에서 라우팅 기능을 제공하고 있지 않기때문에 직접 구현하여 사용해야한다.

    그렇기 때문에 react-router 는 리액트를 사용함으로써 필수적이라 할 수 있다.

  

    - 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해준다.

    - 서버 사이드 렌더링을 도와준다.

 

 

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

 

      react-router-dom의 라우터는 <BrowserRouter>와 <HashRouter> 두가지가 있다.

     <BrowserRouter>는 HTML5의 history API를 활용하여 UI를 업데이트하고,

     <HashRouter>는 URL의 hash를 활용한 라우터로 정적인(static)페이지에 적합하다.

 

 

import { Route, Switch } from "react-router-dom";

 

라우트를 설정 할 때에는 Route 컴포넌트를 사용하고, 경로는 path 값으로 설정합니다.

exact path 는 주어진 경로와 정확히 맞아야만 설정한 컴포넌트를 보여준다.

exact 를 하지 않으면, / 경로로 접속시 /login, /register, /movie/:movieId 에도 / 가 있기 때문에, 매칭이 되어서 보여지게된다.

Switch 컴포넌트를 사용하면, 이 컴포넌트에 감싸진 라우트 중 매칭되는 첫번째 라우트만 보여주고 나머지는 보여주지 않는다.

단, switch 컴포넌트는 위에서부터 순서대로 비교하기 때문에 나열하는 순서가 매우 중요하다.

(/about 과 /about/:name 두 라우트를 순서대로 switch로 감싸주었을때 name 파라미터를 전달해도 /about이 먼저 매칭되어버린다.)

** Route 컴포넌트의 exact path, Switch 컴포넌트를 이용하여 라우트 정확도를 높일 수 있다.

 

console .log(this.props)

 <Route exact path="/movie/:movieId" component={Auth(MovieDetail, null)} />

 

라우트 파라미터 읽기

 

    - 라우트로 설정한 컴포넌트는 자동으로 3가지 props를 전달받게 된다.

      history :  push, replace 를 이용하여 다른 경로로 이동하거나 앞/뒤 페이지로 전환 할 수 있습니다.

      location : 현재 경로에 대한 정보를 지니고 있고 URL 쿼리 (/about?foo=bar 형식) 정보도 가지고있다.

      match : 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params (/about/:name 형식) 정보를 가지고있다.

 

    - 라우트에 파라미터값을 전달하려면 params 또는 query 를 이용한다.

       params 예시 : /movie/:movieId

                         특정 아이디 혹은 이름을 사용하여 조회할 때 

                         사용 전에 라우트에 꼭 지정해야한다.

       query 예시 :  /movie?details=true

                         어떤 키워드를 검색하거나 페이지에 필요한 옵션을 전달할 때

                         컴포넌트 내에서 동적으로 사용할 수 있다

 

    - query 는 해석을 위해 라이브러리를 따로 추가해야한다(query-string 등)

      해석시 받아오는 값들은 모두 문자열이라는 점을 주의해야한다.

          const query = queryString.parse(location.search);

 

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

 

   리액트 내에서 <a href>속성을 이용하여 페이지 이동 등을 하는 것은 완전 새로고침(첫 렌더링)되기때문에,

   Link 컴포넌트를 사용하여 페이지를 새로 불러오는걸 막고, 원하는 라우트로 화면 전환을 한다.

   NavLink : 활성화된 url에 특정 스타일(activeStyle) 혹은 클래스(activeClassName)를 지정 할 수 있다.

 

 

 

---

출처 👇👇👇 

https://ing-yeo.net/2020/10/react-beginner-5/

https://velopert.com/3417

https://gongbu-ing.tistory.com/45?category=780189