[TIL #15-1 WECODE] React Router
210303 WECODE #15-1
React Router
1. SPA
- SPA (Single Page Application) - 페이지가 1개인 애플리케이션
- 리액트 프로젝트에서
.html
파일의 개수가 1개인 것을 뜻한다.
- 한 개의 웹페이지(
html
) 안에서 여러 개의 페이지를 보여주는 방법이 Router
이다!
2. Routing
- 라우팅(Routing)이란 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것이다
- 리액트 자체에는 이러한 기능이 내장되어있지 않다는 것!
- 리액트가 Framework 가 아닌
Library
로 분류되는 이유는 아래 이미지로 설명할 수 있다.
React-router
는 리액트의 라우팅 기능을 위해 가장 많이 사용 되는 라이브러리.
- Third-party Library로 표현할 수 있다!
3. React Router
Create React App(CRA)
에 특별히 routing을 위한 로직이 들어있지 않기 때문에, 가장 인기 있는 routing solution인 react-router
를 추가해서 routing을 구현하는 방법을 작성 해보겠다.
3-1. react-router 설치
npm install react-router-dom --save
--save
를 하는 이유는 간혹 저장되지 않는 경우가 있는데 save를 함으로써 package.json
에 명시적으로 표현해 주기 위함이다.
- 팀 프로젝트시 확실히 써주어 프로젝트 진행동안에 포함여부를 miss하는 일이 없도록 하자!
3-2. Routes 컴포넌트 구현하기
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
} from 'react-router-dom';
import Login from './pages/Login/Login';
import Main from './pages/Main/Main';
class Routes extends React.Component {
render() {
return (
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/main" component={Main} />
</Switch>
</Router>
)
}
}
export default Routes;
as Router
는 BrowserRouter의 줄임말로 보다 가시성을 높이기 위한 표현이다. 아래 코드를 보면 <Router>
로 표현되고 있다.
- 순서를 보면
리액트-라우터-컴포넌트
순으로 적히고 있고,
Login-Main
또한 순서대로 내려적고 있는 것을 볼 수 있는데 코드의 가독성을 높이기 위함이다.
3-3. index.js
ReactDOM.render(<Routes />, document.getElementById('root'));
- CRA로 만든 앱에 routing 기능을 적용하려면
index.js
를 수정해야 한다.
- 적혀있는 컴포넌트(
<App />
) 대신에 routing을 설정한 컴포넌트(<Routes />
)로 변경해야 합니다.
3-4. Route 이동하는 방법
<Link> 컴포넌트
& withRouterHOC
3-4-1. <Link>
컴포넌트 사용하는 방법
import React from 'react';
import { Link } from 'react-router-dom';
class Login extends React.Component {
render() {
return (
<div>
<Link to="/Main">로그인</Link>
</div>
)
}
}
export default Login;
react-router-dom
에서 제공하는 <Link>
컴포넌트는 DOM에서 <a>
로 변환(Compile)이 된다.
- cf) JSX -> Babel -> JavaScript
<a>
vs. <Link>
<a>
- 외부 사이트로 이동하는 경우
<Link>
- 프로젝트 내에서 페이지 전환하는 경우
3-4-2. withRouterHOC 로 구현하는 방법
import React from 'react';
import { withRouter } from 'react-router-dom';
class Login extends React.Component {
goToMain = () => {
this.props.history.push('/Main');
}
render() {
return (
<div>
< button className="loginBtn" onClick={this.goToMain} >
로그인
</button>
</div>
)
}
}
export default withRouter(Login);
goToMain
라는 event handler에서 구현한 것처럼 props 객체의 history (this.props.history
) 에 접근해서 이동할 수 있다.
- 받은
history
의 push
메서드의 인자로 Routes.js
에서 설정한 path를 넘겨주면, 해당 라우트로 이동할 수 있다.
- 이 컴포넌트(Login 컴포넌트)에서 props에 route 정보(
history
)를 받으려면 export하는 컴포넌트에 withRouter
로 감싸주어야 한다.
- 이렇게
withRouter
와 같이 해당 컴포넌트를 감싸주는 것이 Higher Order Component (이하 HOC)
- 자세한 내용은
state
와 props
를 공부한 후 적용해보자!
3-4-3. 활용 예시로는?
<Link>
- 클릭 시 바로 이동하는 로직 구현 시에 사용
- 아이템 리스트 페이지에서 아이템 클릭 시 -> 상세 페이지로 이동
withRouterHOC
- 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우
- ex. 로그인 버튼 클릭 시
- Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
- Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동
Author And Source
이 문제에 관하여([TIL #15-1 WECODE] React Router), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@whoyoung90/TIL-15-WECODE-React-Router-Sass
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
1. SPA
- SPA (Single Page Application) - 페이지가 1개인 애플리케이션
- 리액트 프로젝트에서
.html
파일의 개수가 1개인 것을 뜻한다.
- 한 개의 웹페이지(
html
) 안에서 여러 개의 페이지를 보여주는 방법이 Router
이다!
.html
파일의 개수가 1개인 것을 뜻한다.html
) 안에서 여러 개의 페이지를 보여주는 방법이 Router
이다!2. Routing
- 라우팅(Routing)이란 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것이다
- 리액트 자체에는 이러한 기능이 내장되어있지 않다는 것!
- 리액트가 Framework 가 아닌
Library
로 분류되는 이유는 아래 이미지로 설명할 수 있다.
React-router
는 리액트의 라우팅 기능을 위해 가장 많이 사용 되는 라이브러리.
- Third-party Library로 표현할 수 있다!
Library
로 분류되는 이유는 아래 이미지로 설명할 수 있다.React-router
는 리액트의 라우팅 기능을 위해 가장 많이 사용 되는 라이브러리.3. React Router
Create React App(CRA)
에 특별히 routing을 위한 로직이 들어있지 않기 때문에, 가장 인기 있는 routing solution인 react-router
를 추가해서 routing을 구현하는 방법을 작성 해보겠다.
3-1. react-router 설치
npm install react-router-dom --save
--save
를 하는 이유는 간혹 저장되지 않는 경우가 있는데 save를 함으로써package.json
에 명시적으로 표현해 주기 위함이다.- 팀 프로젝트시 확실히 써주어 프로젝트 진행동안에 포함여부를 miss하는 일이 없도록 하자!
3-2. Routes 컴포넌트 구현하기
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
} from 'react-router-dom';
import Login from './pages/Login/Login';
import Main from './pages/Main/Main';
class Routes extends React.Component {
render() {
return (
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/main" component={Main} />
</Switch>
</Router>
)
}
}
export default Routes;
as Router
는 BrowserRouter의 줄임말로 보다 가시성을 높이기 위한 표현이다. 아래 코드를 보면<Router>
로 표현되고 있다.- 순서를 보면
리액트-라우터-컴포넌트
순으로 적히고 있고,
Login-Main
또한 순서대로 내려적고 있는 것을 볼 수 있는데 코드의 가독성을 높이기 위함이다.
3-3. index.js
ReactDOM.render(<Routes />, document.getElementById('root'));
- CRA로 만든 앱에 routing 기능을 적용하려면
index.js
를 수정해야 한다. - 적혀있는 컴포넌트(
<App />
) 대신에 routing을 설정한 컴포넌트(<Routes />
)로 변경해야 합니다.
3-4. Route 이동하는 방법
<Link> 컴포넌트
& withRouterHOC
3-4-1. <Link>
컴포넌트 사용하는 방법
import React from 'react';
import { Link } from 'react-router-dom';
class Login extends React.Component {
render() {
return (
<div>
<Link to="/Main">로그인</Link>
</div>
)
}
}
export default Login;
react-router-dom
에서 제공하는<Link>
컴포넌트는 DOM에서<a>
로 변환(Compile)이 된다.- cf) JSX -> Babel -> JavaScript
<a>
vs.<Link>
<a>
- 외부 사이트로 이동하는 경우<Link>
- 프로젝트 내에서 페이지 전환하는 경우
3-4-2. withRouterHOC 로 구현하는 방법
import React from 'react';
import { withRouter } from 'react-router-dom';
class Login extends React.Component {
goToMain = () => {
this.props.history.push('/Main');
}
render() {
return (
<div>
< button className="loginBtn" onClick={this.goToMain} >
로그인
</button>
</div>
)
}
}
export default withRouter(Login);
goToMain
라는 event handler에서 구현한 것처럼 props 객체의 history (this.props.history
) 에 접근해서 이동할 수 있다.- 받은
history
의push
메서드의 인자로Routes.js
에서 설정한 path를 넘겨주면, 해당 라우트로 이동할 수 있다. - 이 컴포넌트(Login 컴포넌트)에서 props에 route 정보(
history
)를 받으려면 export하는 컴포넌트에withRouter
로 감싸주어야 한다. - 이렇게
withRouter
와 같이 해당 컴포넌트를 감싸주는 것이 Higher Order Component (이하 HOC) - 자세한 내용은
state
와props
를 공부한 후 적용해보자!
3-4-3. 활용 예시로는?
<Link>
- 클릭 시 바로 이동하는 로직 구현 시에 사용
- 아이템 리스트 페이지에서 아이템 클릭 시 -> 상세 페이지로 이동
withRouterHOC
- 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우
- ex. 로그인 버튼 클릭 시
- Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
- Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동
Author And Source
이 문제에 관하여([TIL #15-1 WECODE] React Router), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@whoyoung90/TIL-15-WECODE-React-Router-Sass저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)