리액트에서 라우팅을 하는 방법에 대해 알아보자.
다른 주소에 따라 다른 뷰를 보여주는 것
리액트는 자체적으로 내장된 라우팅 기능이 없고, 공식 라우팅 라이브러리도 없다.
써드파티 라이브러리를 사용하여 개발해야함
<BrowserRouter>
<App />
</BrowserRouter>
웹 어플리케이션에 있는 HTML5의 History API
를 사용하여 페이지를 새로고침하지 않고도 주소를 변경, 현재 주소와 관련된 정보를 props
로 쉽게 조회하거나 사용할 수 있도록 해줌
<Route path="/" component={Home} exact={true} />
어떤 규칙을 가진 경로에 어떤 컴포넌트를 보여줄지 정의함
"/"
와 "/home"
)exact={true}
속성을 사용한다!<Route path={['/', '/home']} component={Home} exact={true} />
<Link to="/"> 홈 </Link>
클릭하면 다른 주소로 이동시키는 컴포넌트
리액트 라우터를 사용할 땐 a 태그를 사용해서 주소 이동하면 안됨
(a 태그는 페이지를 이동시키면서 페이지를 아예 새로 불러오기 때문에 상태나 렌더링 된 컴포넌트들이 모두 사라지고 새로 렌더링하게 됨)
/profile/id
/about?detail=true
parameter는 특정 아이디 혹은 이름을 사용하여 조회할 때 사용하고, 쿼리는 우리가 어떤 키워드를 검색하거나 페이지에 필요한 옵션을 전달할 때 사용함.
라우트로 사용되는 컴포넌트에서 받아오는 match
라는 객체 안의 params 값을 참조함
match
객체 안에는 현재 컴포넌트가 어떤 경로 규칙에 의해 보이는지에 대한 정보가 들어있음
path에서 :변수명
이라고 넣어주면 해당 변수명에 해당하는 값을 파라미터로 넣어주어서 match
props를 통하여 전달받을 수 있게 됨.
<Route path="profile/:username" component={Profile} />
location
객체에 들어있는 search
값에서 조회함. location
객체는 라우트로 사용된 컴포넌트에게 props로 전달되며, 웹 어플리케이션의 현재 주소에 대한 정보를 지니고 있음.
const query = qs.parse(location.search, {
ignoreQueryPrefix : true // 이 설정을 통해 문자열 맨 앞의 ?(question mark)를 생략함
});
const showValue = query.value === 'true';
(쿼리 문자열을 객체로 변환하기 위해선 qs 라이브러리가 필요함)
라우트 내부에 또 라우트를 정의하는 것
라우트로 사용되고 있는 컴포넌트의 내부에 Route 컴포넌트를 또 사용하면 됨