[211023] React #05 : router

생활코딩! React 리액트 프로그래밍 도서를 바탕으로 React 공부시작.

금일 진도는 248P ~ 277P.

목차로는 03. React Router DOM (챕터 03, 끝)

 

1. 설치와 기본 정의

vue-router와 같은 react-router-dom 의 사용법 설명 파트.

npm install react-router-dom

 

vue에서 URL의 변경에 따른 페이지의 변화를 위해 가장 외곽을 <router-view> 태그로 감싸듯이 react-router-dom도 <BrowserRouter> 혹은 <HashRouter>로 감싸줘야 함. 둘의 차이는 이름을 보면 알겠지만 HashRouter가 Hash 태그(#) 붙는 형태의 URL이고 BrowserRouter는 해쉬없이 기존의 브라우져가 인식하던 그 형태임. 

 

그래서 예제에선 아래와 같이 ReactDOM.render에서 감쌈

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route} from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter><App/></BrowserRouter>),
    document.getElementById('root')
)

 

2. Route & Switch 컴포넌트

Route 태그는 path라는 props를 가지며, 해당 path가 인식됐을 타이밍에 렌더링되는 주체를 정의한다.

<Route exact path="/"><Home/><Route>
<Route path="/act"><Act/><Route>
<Route path="/sample"><Sample/><Route>

 

위와 같을 경우 /sample 경로 입력시 Sample 컴포넌트가 해당 영역에 렌더링된다.

 

이때, exact라는 props가 "/" path로 정의된 Route 컴포넌트에 정의되었는데,

만약 http://localhost:3000/sample 이라는 경로로 접속시 react-router-dom은 "/" 경로와 "sample" 2개 경로를 인식하기 때문에 이 경우 <Home/>과 <Sample/> 컴포넌트가 동시에 렌더링된다. exact는 이러한 상황을 방지해주는 props이며 URL과 완전히 일치하는 path만을 렌더링하게 해준다.

 

만약 exact를 사용하지않으려면, 아래와 같이 Switch 컴포넌트로 Route 컴포넌트를 감싸주면된다.

<Switch>
    <Route path="/act"><Act/><Route>
    <Route path="/sample"><Sample/><Route>
    <Route path="/"><Home/><Route>
</Switch>

단, 여기서 순서를 역전시켜서 루트경로의 <Home/>이 맨 아래로 온 이유는, Switch 컴포넌트는 URL과 일치하는 첫 번째 컴포넌트가 발견되면 나머지 컴포넌트는 버리기 때문이다. 즉,  http://localhost:3000/sample 경로로 접근시 설명했던 것처럼 "/" 경로와 "/sample" 경로를 동시에 인식하는데, 이 중 위에 배치된 "/" 경로가 선인식되어 <Home/> 컴포넌트가 렌더링 될 것이기 때문에 맨 아래로 배치함으로써 이러한 이슈를 해결하 것이다.

 

하지만...책의 설명에 의하면 사실 아래와 같이 쓰는게 적절한 거 같다. 

<Switch>
    <Route exact path="/"><Home/><Route>
    <Route path="/act"><Act/><Route>
    <Route path="/sample"><Sample/><Route>
    <Route path="/">Not Found<Route>
</Switch>

"/" 경로에 대해 최상단에 exact를 둠으로써 http://localhost:3000/sample 경로로 접근하더라도 "/sample"과 완전히 일치하는 Route 컴포넌특 렌더링됨과 동시에, 정의해두지 않은 URL에 대해서는 최하단 Route 컴포넌트를 활용해서 Not Found라는 글자를 보여주게 된다(필요하다면 Not Found에 대한 컴포넌트를 별도 정의해서 활용해도 된다)

 

3. Link & NavLink

vue-router에서 router.push 메서드를 활용해서 URL의 변경 및 화면을 이동시키곤했는데,

react도 Link 컴포넌트를 활용하면 그런 기능이 가능하다.

<Link to="/sample">Sample</Link>

Link 컴포넌트는 to props를 통해 이동할 path를 지정하며, 위 Link 컴포넌트 클릭시

<Route path="/sample"><Sample/><Route>

이 Route 컴포넌트가 화면에 렌더링되는 것이다.

 

그리고 NavLink 라는 컴포넌트가 있는데...사실 Link랑 거의 흡사한데

현재 선택된 URL에 의해 렌더링 된 HTML에 아래와 같이 active 라는 css class가 자동 추가 된다.

4. 파라미터 전달은 vue랑 유사함

vue-router에서 path에 파라미터를 전달할 경우, 콜론을 붙였었다.

react에서도 아래와 같다.

<Route path="/sample/:sample_id">
    <Sample/>
</Route>

이와같이 콜론을 붙이고 파라미터명을 전달하면,

실제 내부의 Sample 이라는 컴포넌트에서는 useParam 이라는 훅(Hook)을 사용해서 받는다.

function Sample(){
    let params = useParams();
    console.log(params); // {sample_id: 값}
  
    return (
        <div>
            <h4>{params.sample_id}</h4>
        </div>
    )
}

위와같이 콜론을 붙여서 넘긴 파라미터명을 그대로 활용가능하다.

그리고 이 값에 따라서 추가 로직이 필요하다면 구현하면 된다.