#React 라우팅 하기!

드디어 라우팅이라는 것을 공부한다

 

앙귤러. js나 Vue.js에도 라우터가 있는데, 리엑트도 있을 거라 생각하고

 

많이 사용할 것 같기때문에 꼭 공부해야지라고 생각했다

 

리엑트 라우터란,

리엑트는 컴포넌트 기반이라서, 싱글 뭐시기ㅣ 페이지라 해서 페이지를 하나만 써야 하고, 새로고침이 되어선 안된다고 하더라, 그래서 링크를 클릭했을 때 바꿔 치겠끔 해주는 것을 한다 

 

일단 시작하자

 

1. 라우터 설치

npm install react-router-dom

 

 

2. 실습 재료 만들기 (컴포넌트 만들기)

 

나란히 둘이서 걸어요~

이렇게 page1.js 와 page 2.js를 만들어 준다 (앞글자는 대문자로 하자..)

 

Page1.js

const Page1 = () => {

    return(
        <h1>Page1 입니다</h1>
    );
}

export default Page1;

Page2.js

const Page2 = () => {

    return(
        <h1>Page2 입니다</h1>
    );
}

export default Page2;

App.js

import './App.css';
import { Route } from 'react-router-dom'
import Page1 from './page1';
import Page2 from './page2';

function App() {

  return (
    <div className="App">
      <nav>
        <div>Page1</div>
        <div>Page2</div>
      </nav>
      <Route path='/page1' exact={true} component={Page1}></Route>
      <Route path='/page2' exact={true} component={Page2}></Route>
    </div>
  );
}

export default App;

아까 설치한 react-router-dom을 import 해준다

그리고 생성한 js파일들도 import 해준다

 

Route를 이용해서 내가 원하는 path를 설정한 뒤 component도 설정한다

 

exact true는 path가 무조건 맞아떨어져야 한다는 의미이다

 

그리고 실행해본다, 결과는 바~~~ 로 에러 떴다 역시 한 번에 되는 일이 없더라

 

 

3. index.js도 설정

 

중요한 게 빠졌었다

 

BrowserRouter를 import 해주고 App을 BrowserRouter로 감싸줘야 한다

 

그리고 리엑트를 실행해 본다

 

4. 결과 보기

 

브라우저를 확인해 보면, 이런 쥿밥같은 화면에 Page1 Page2만 있는 것을 볼 수 있다

 

그럼 라우트의 실행은 어떻게 하는가 하면, url에 /page 1이나 /page 2를 추가해서 확인해보자!

그럼 이런 덜 쥿밥같은 페이지가 된다! page 2도 똑같은 기능이 생겼다

 

5. Link 달기

 

그럼 Page1을 눌렀을 때는 Page1입니다가 뜨겠끔 하고싶고, Page2를 눌렀을때는 Page2입니다 뜨게 하고 싶다면

 

흔히 쓰는

<a href=''></a>

를 쓰면 되긴 되는데 새로고침이 되어버린다. 

 

그러므로, react-router-dom이 제공해주는 

 

<Link></Link>

를 사용해 보겠다

 

<Link to='/page1'>Page1</Link>

 

이딴 식으로 달아주면 된다 to='' 에다가 눌렀을 때 내가 원하는 페이지 Path를 넣어주면 된다

* import 잘 보고 달아주면 된다 (Link)

 

 

브라우저를 확인해 보면 아래와 같다 

 

Page1을 눌렀을 때

Page2를 눌렀을 때

 

6. 데이터 넘기기

 

이번에는 데이터를 넘겨 보겠다

 

<Link to='/page1/10'>Page1</Link>

<Route path='/page1/:data' exact={true} component={Page1} />

위와 같이 자릿수대로 추가하면 된다. 

:data는 아이디를 뜻할 수가 있겠다

 

그럼 받을 때는 어떻게 받을 까?

 

Page1.js

props로 받을 수 있다. 무슨 데이터가 오는지 확인해보기 위해 출력해 보도록 한다

 

 

이런 데이터를 전달받았다. 그리고 자세히 들여다보면

match 안에 params안에 data가 존재하고 있는 것을 볼 수가 있다

 

이런 식으로 라우팅으로도 데이터를 주고받고를 할 수가 있다