[React] React Router

nhchoi·2021년 11월 19일
0

React

목록 보기
1/3
post-thumbnail

리액트에서 라우팅을 하는 방법에 대해 알아보자.

라우팅이란?

다른 주소에 따라 다른 뷰를 보여주는 것
리액트는 자체적으로 내장된 라우팅 기능이 없고, 공식 라우팅 라이브러리도 없다.
써드파티 라이브러리를 사용하여 개발해야함

react-router

BrowserRouter

<BrowserRouter>
  	<App />
</BrowserRouter>

웹 어플리케이션에 있는 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경, 현재 주소와 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해줌


Route

<Route path="/" component={Home} exact={true} />

어떤 규칙을 가진 경로에 어떤 컴포넌트를 보여줄지 정의함

  • 규칙이 같은 경로가 중첩 라우팅이 되는 것을 막고싶다면? (eg. "/""/home")
    • exact={true} 속성을 사용한다!
    • path 속성에 넣은 경로값이 정확이 url과 일치할 때만 렌더링 됨
  • Route 하나에 여러 path를 설정하고 싶다면?
    • path props를 배열로 설정해주면 여러 경로에서 같은 컴포넌트를 보여줄 수 있게 됨
    • <Route path={['/', '/home']} component={Home} exact={true} />

<Link to="/"></Link>

클릭하면 다른 주소로 이동시키는 컴포넌트
리액트 라우터를 사용할 땐 a 태그를 사용해서 주소 이동하면 안됨
(a 태그는 페이지를 이동시키면서 페이지를 아예 새로 불러오기 때문에 상태나 렌더링 된 컴포넌트들이 모두 사라지고 새로 렌더링하게 됨)


URL 파라미터와 쿼리

  • parameter : /profile/id
  • query : /about?detail=true

parameter는 특정 아이디 혹은 이름을 사용하여 조회할 때 사용하고, 쿼리는 우리가 어떤 키워드를 검색하거나 페이지에 필요한 옵션을 전달할 때 사용함.

URL 파라미터

라우트로 사용되는 컴포넌트에서 받아오는 match라는 객체 안의 params 값을 참조함
match 객체 안에는 현재 컴포넌트가 어떤 경로 규칙에 의해 보이는지에 대한 정보가 들어있음
path에서 :변수명이라고 넣어주면 해당 변수명에 해당하는 값을 파라미터로 넣어주어서 match props를 통하여 전달받을 수 있게 됨.

<Route path="profile/:username" component={Profile} />

URL 쿼리

location 객체에 들어있는 search 값에서 조회함. location 객체는 라우트로 사용된 컴포넌트에게 props로 전달되며, 웹 어플리케이션의 현재 주소에 대한 정보를 지니고 있음.

const query = qs.parse(location.search, {
  	ignoreQueryPrefix : true // 이 설정을 통해 문자열 맨 앞의 ?(question mark)를 생략함
});
const showValue = query.value === 'true';

(쿼리 문자열을 객체로 변환하기 위해선 qs 라이브러리가 필요함)

서브 라우트

라우트 내부에 또 라우트를 정의하는 것
라우트로 사용되고 있는 컴포넌트의 내부에 Route 컴포넌트를 또 사용하면 됨

profile
👩‍💻

0개의 댓글