라우팅이란

728x90

1. SPA 란?

Single Page Aplication

보통의, 웹사이트는 페이지를 이동할때마다 html, css , js 등을 서버로부터 받아오지만, 이방식은 딱한번만 정적자원을 받아온다.

* 장점 : 사용성

→ 페이지를 이동할때마다 서버에서주는 html로 바꾸다보면은 호율이 떨어진다!

( 회원가입 할때 작성중이던 내용이 사라지거나 변경되는 내용 뿐만아니라 모든 부분의 html 을 불러오게 된다.)

* 단점 : 처음 모든 컴포넌트를 불러오다보니 로딩 속도가 느려질 수 있다.

2. 라우팅이란?

SPA에서 주소를 옮기는 방법은 html은 하나만 가지고 있지만 브라우저 주소창대로 다른 페이지를 보여줄 수 있다.

주소창주소대로 다른 페이지를 보여주는걸 라우팅이라고 한다.

3. 리액트 라우팅 적용하기(패키지 설치)

먼저, 새프로젝트를 만들어 패키지를 설치하자.

yarn add react-router-dom

* 참고용 공식문서

https://reactrouter.com/web/guides/primary-components

React Router: Declarative Routing for React

Learn once, Route Anywhere

reactrouter.com

공식문서를 보는게 제일 어렵다.... 죄다 영어

기본적인 코드에 익숙해지고 이해하는데 무리가 없다면 공식문서를 통해 활용하는것도 가능할 것 같다.

어려워도 자꾸보다보면은 괜찮아지겠지!

4. 리액트에서 라우팅 적용하기(페이지 전환)

1. BrowserRouter 적용하기

- index.js

import React from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
//reportWebVitals란 React의 성능을 측정하기 위한 것

// 이부분이 index.html에 있는 div#root에 우리가 만든 컴포넌트를 실제로 랜더링하도록 연결해주는 부분
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root") );

// 앱에서 성능 측정을 시작하려면 기능을 전달합니다.
//결과를 기록하거나(예: reportWebVitals(console.log)) 분석 끝점으로 보냅니다.
// 자세한 내용은 https://bit.ly/CRA-vitals를 참조하십시오.

reportWebVitals();

BrowserRouter는 웹 브라우저가 가지고 있는 주소 정보를 props 로 넘겨주는 친구이다.

현재 내가 어느주소를 보고 있는지 쉽게 알려준다.

2. 세부 화면 만들기

* 라우팅 기능을 적용해보기 위해 간단한 세부화면을 만들어보자.

- Home.js

import React from "react";

const Home = (props) => {
return (
<div>메인 화면이에요.</div>
)
}

export default Home;

- Cat.js

import React from "react";

const Cat = (props) => {
return (
<div>고양이 화면이에요.</div>
)
}

export default Cat;

- Dog.js

import React from "react";

const Dog = (props) => {
return (
<div>강아지 화면이에요.</div>
)
}

export default Dog;

3. App.js 에서 Route 적용하기

* Route 사용방법

- 넘겨줄 props 가 없을때

- 넘겨줄 props가 있을때 ( 예를들어, 버킷리스트앱에서 list를 props로 넘겨줄때 사용한다.)

* App.js 에 적용하기

import React from 'react';
import logo from './logo.svg';
import './App.css';

// Route를 먼저 불러온다.
import { Route } from "react-router-dom";

// 세부 페이지가 되어줄 컴포넌트들도 불러온다.
import Home from "./Home";
import Cat from "./Cat";
import Dog from "./Dog";

class App extends React.Component {
constructor(props){
super(props);
this.state={};
}

render(){
return (
<div className="App">
<Route path="/" exact component={Home} />
<Route path="/cat" component={Cat} />
<Route path="/dog" component={Dog} />
</div>
);
}
}

export default App;

이렇게 적용을 해준다면, 주소창에 path 에 등록된 주소를 입력해보면

라우팅 처리가 정상적으로 된걸 알 수 있다.

여기에서 주의할점은, " <Route path="/" exact component={Home} /> " 주소와 같이 수정이 필요하다.

모든 주소에 "/" 이 들어가있으므로, exact 적용해주지않으면 Home 화면이 같이 뜨는걸 볼 수 있다.

4. hostory 사용하기

- history 사용을 위해서는 withRouter 를 먼저 적용해줘야한다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

import { withRouter } from "react-router";
// Route를 먼저 불러온다
// Link 컴포넌트도 불러온다.
import { Route, Link } from "react-router-dom";

// 세부 페이지가 되어줄 컴포넌트들도 불러와준다.
import Home from "./Home";
import Cat from "./Cat";
import Dog from "./Dog";

class App extends React.Component{
..
}

// 내보내는 부분에서 withRouter로 감싸준다.

export default withRouter(App);

이렇게 설정을 해주고 "componentDidMount(){ console.log(this.props); } " 찍어보면

정상적으로 history 객체에 props를 받아오는걸 볼 수 있다.

이제는 버튼을 만들어서 페이지를 이동시켜보자!

import React from 'react';
import React from 'react';
import logo from './logo.svg';
import './App.css';

import { withRouter } from "react-router";
// Route를 먼저 불러온다
// Link 컴포넌트도 불러온다.
import { Route, Link } from "react-router-dom";

// 세부 페이지가 되어줄 컴포넌트들도 불러와준다.
import Home from "./Home";
import Cat from "./Cat";
import Dog from "./Dog";

class App extends React.Component {

constructor(props){
super(props);
this.state={};
}

componentDidMount(){
console.log(this.props);
}

render(){
return (
<div className="App">
<div>
<Link to="/">Home으로 가기</Link>
<Link to="/cat">Cat으로 가기</Link>
<Link to="/dog">Dog으로 가기</Link>
</div>

<hr />
<Route path="/" exact component={Home} />
<Route path="/cat" component={Cat} />
<Route path="/dog" component={Dog} />

<button onClick={() => {
// props에 있는 history를 사용해서
// push([이동할 주소])는 페이지를 이동시킨다.
this.props.history.push('/cat'); }}>
cat으로 가기
</button>

<button onClick={()=>{
// goBack()은 뒤로가기
this.props.history.goBack();
}}>뒤로가기
</button>
</div>
);
}
}

// 내보내는 부분에서 withRouter로 감싸준다.
export default withRouter(App);

저작자표시

'내마음대로만들어보자 > React' 카테고리의 다른 글

리덕스란? - 리덕스를 통한 상태관리 (0)	2021.07.26
잘못된 주소 처리 - NotFound (라우팅) (0)	2021.07.26
Event Listener (0)	2021.07.19
ref 적용예시 (0)	2021.07.19
State 관리 - 함수형 컴포넌트 (0)	2021.07.15

K-CodingStory

라우팅이란

'내마음대로만들어보자 > React' 카테고리의 다른 글

티스토리툴바

라우팅이란

'내마음대로만들어보자 > React' 카테고리의 다른 글

관련글

티스토리툴바