1. 리액트에서 라우팅 처리하기(2)
1.1. 페이지를 전환해보자!
(1). index.js에 BrowserRouter적용하기.
- BrowserRouter 적용하기.
BrowserRouter는 웹 브라우저가 가지고 있는 주소 관련 정보를 props로 넘겨주는 친구이다. 현재 내가 어느 주소를 보고 있는 지 쉽게 알 수 있게 도와준다.
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';
// 이부분이 index.html에 있는 div#root에 우리가 만든 컴포넌트를 실제로 랜더링하도록 연결해주는 부분입니다.
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();(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 사용방법 1: 넘겨줄 props가 없을 때!
<Route path="주소[/home 처럼 /와 주소를 적어요]" component={[보여줄 컴포넌트]}/>- Route 사용방법 2: 넘겨줄 props가 있을 때!(우리 버킷리스트 앱은 App.js에서 list를 props로 넘겨준다. 그럴 땐 아래와 같이 쓰면 된다.
<Route path="주소[/home 처럼 /와 주소를 적어요]" render={(props) => (<BucketList list={this.state.list} />)} />- 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="/" component={Home} />
<Route path="/cat" component={Cat} />
<Route path="/dog" component={Dog} />
</div>
);
}
}
export default App;(4). exact 적용하기.
화면을 확인해봤더니, /cat과 /dog에서는 자꾸 Home 컴포넌트가 같이 나오는데 이유는 "/"이 기호가 "/cat"과 "/dog"에도 포함되어 있어서 그렇다. 아래처럼 exact를 추가하고 다시 주소를 이동해보면 된다.
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;(5). URL 파라미터 사용하기.
- 웹사이트 주소에는 파라미터와 쿼리라는 게 있다. 우리는 그 중 파라미터 사용법을 알아 볼것이다.
- 파라미터는 이렇게 생겼다!
- 파라미터:/cat/nabi
- 쿼리: /cat?name=nabi
- 파라미터 주는 방법
//App.js
...
// 파라미터 주기
<Route path="/cat/:cat_name" component={Cat}/>
...- 파라미터 사용 방법
//Cat.js
import React from "react";
const Cat = (props) => {
console.log(props.match);
return (
<div>고양이 화면이에요.</div>
)
}
export default Cat;(6). 링크 이동 시키기.
-
매번 주소창을 찍고 페이지를 돌아다닐 순 없다. react-router-dom으로 페이지를 이동하는 방법을 알아볼 것이다.
-
Link 사용하기.
링크 컴포넌트는 HTML 중 a 태그와 비슷한 역할을 한다. 리액트 내에서 페이지 전환을 도와준다.
<Link to="주소">[텍스트]</Link>- App.js에 메뉴를 넣어보자.
->우리가 만든 메뉴처럼 바깥에 있는 돔요소는 페이지가 전환되어도 그대로 유지된다.
import React from 'react';
import logo from './logo.svg';
import './App.css';
// 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={};
}
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} />
</div>
);
}
}
export default App;- history 사용하기.
- 먼저, App.js의 componentDidMount()에서 props를 콘솔로 찍어본다.
...
componentDidMount(){
console.log(this.props);
}
...- withRouter를 설정하고 다시 props를 본다.
- history 객체를 props로 받아오려면, 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);- App.js
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);.png)
👍🏻 SeungMai (매 순간 기록을!)🧑🏻💻 | WIL만 올리고 있습니다 | 기술블로그는 아래 🏠 의 링크를 이용해주세요.