ReactRouter (여러 주소를 사용하기 위한 라이브러리)

리액트는 SPA(Single Page Application) 방식이다.

즉, 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.

 

하지만 Header, Navigator, Footer는 중복이 되더라도 사용자 정보, 컨텐츠 정보, 컨텐츠 세부정보 등의 컴포넌트 들의 페이지 주소는 다르게 구성해야한다.

 

서로 다른 컴포넌트들의 주소에 따라 컴포넌트 배치를 변경하는 작업을 라우팅(Routing)이라고 한다.

 

1. React-Router 적용하기

라이브러리 설치가 필요하다.

npm install react-router-dom

그 후 import로 필요 한 것들을 가져온다. 

지금은 우선 Route만 가져 오겠다.

//App.js
import {BrowserRouter, Route} from 'react-route-dom';

이제 우리는 route를 사용할 수 있게 되었다.

마지막에 랜더링을 하는곳에 router로 감싸주어야한다.

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

 

2. React-Router 사용

//App.js          
function App(){
    return (
        <div>
            <h1>React Router DOM example</h1>
                <Route path="/"><Home></Home></Route>
                <Route path="/topics"><Topics></Topics></Route>
                <Route path="/contact"><Contact></Contact></Route>
        </div>
    )
}

이런식으로 경로에 따라서 다른 컴포넌트를 보여줄 수 있다.

하지만, 

먄약 localhost:3000/topics 로 url 요청이 들어오면

Home과 Topics의 내용이 같이 나오게 된다.

 

home의 내용과 topics의 내용이 같이나오는 것을 볼 수 있다.

그 이유는 /topics 은 / 와 /topics 둘다 포함하고 있기 때문이다.

 

이런 문제를 해결하기 위해서 3을 사용한다.

 

3. exact / Switch 사용

exact

고유한 path를 알려주기 위해 exact를 사용한다.

사용방법은 다음과 같다.

function App(){
    return (
        <div>
            <h1>React Router DOM example</h1>
                <Route exact path="/"><Home></Home></Route>
                <Route path="/topics"><Topics></Topics></Route>
                <Route path="/contact"><Contact></Contact></Route>
        </div>
    )
}

 

이렇게 exact를 사용하면 /는 /만 들어와야 하고 /topics같은 뒤에 부가적인 것이 붙으면 취급하지를 않는다.

 

swtich

하지만 매번 exact를 붙여주는 것은 여간 귀찮은 일이 아니다.

따라서 swtich문을 사용해보자.

 

먼저 switch를 사용하기 위해서는 import가 필요하다.

//App.js
import {BrowserRouter, Route, Switch} from 'react-router-dom';

사용하는 방법은 아래와 같다.

function App(){
    return (
        <div>
            <h1>React Router DOM example</h1>
            <Switch>
                <Route path="/topics"><Topics></Topics></Route>
                <Route path="/contact"><Contact></Contact></Route>
                <Route exact path="/"><Home></Home></Route>
            </Switch>
        </div>
    )
}

Swtich는 상단부터 path를 비교해 요청과 일치하는 path가 나온다면 이후의 path는 보지않고 버려버린다.

예를들어 아래와 같을 때

            <Switch>
                <Route path="/"><Home></Home></Route>
                <Route path="/topics"><Topics></Topics></Route>
            </Switch>

localhost:3000/topics가 들어오면 맨 상단에 있는 /만 출력하고 /topics는 버려버린다.

이 성지를 이용해서 둘의 위치를 바꿔주면

            <Switch>
                <Route path="/topics"><Topics></Topics></Route>            
                <Route path="/"><Home></Home></Route>
            </Switch>

/topics의 요청이 들어오면 /topics만, /의 요청이 들어오면 /만을 사용할 것이다.