[ReactJs] react router 처음부터 만들기

Front-End/ReactJs 2018. 8. 16. 10:52

react router 처음부터 만들기

1. 정의

- 리액트에서 사용할 라우터를 직접 만들어 본다.

2. 프로젝트 설정

1) 폴더 구조

/js

-bundle.js

/jsx

- app.jsx

-router.jsx

/node_modules

index.html

package.json

webpack.config.js

2) package.json

{ "name": "naive-router", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "./node_modules/.bin/webpack -w" //webpack 빌드스크립트 추가 }, "keywords": [], "author": "", "license": "ISC", "babel": { //Babel이 사용할 프리셋을 지정 "presets": [ "react" ] }, "dependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-react": "^6.24.1", "bootstrap": "^4.1.3", "react": "^16.4.2", "react-dom": "^16.4.2", "webpack": "^4.16.5" }, "devDependencies": { "webpack-cli": "^3.1.0" } }

3) webpack.config.js

module.exports = { entry:'./jsx/app.jsx', output:{ path:__dirname + '/js/', filename:'bundle.js' }, module:{ rules: [ { test:/\.jsx?$/, exclude : /(node_module)/, use:[ 'babel-loader' ] } ] } }

4) app.jsx

const React = require('react') const ReactDom = require('react-dom') const Router = require('./router.jsx') const mapping = { '#profile' : <div>Profile(<a href="#">home</a>)</div>, '#accounts' : <div>Accounts(<a href="#">home</a>)</div>, '*':<div>Dashboard<br/> <a href="#profile">Profile</a> <br/> <a href="#accounts">Account</a> </div> } ReactDom.render( <Router mapping={mapping}/>, document.getElementById('content') )

- mapping 객체로 URL 맵핑을 생성한다.

- mapping 객체를 Router 에 전달 한다.

5) router.jsx

const React = require('react') module.exports = class Router extends React.Component{ constructor(props){ super(props) this.state = {hash: window.location.hash} this.updateHash = this.updateHash.bind(this) } updateHash(event){ this.setState({hash:window.location.hash}) } componentDidMount(){ window.addEventListener('hashchange', this.updateHash, false) } componentWillUnmount(){ window.removeEventListener('hashchange', this.updateHash, false) } render(){ if(this.props.mapping[this.state.hash]){ return this.props.mapping[this.state.hash] }else{ return this.props.mapping['*'] } } }

- Router 컴포넌트는 URL 정보를 받고, 속성으로 전달 받은 mapping 객체를 통해 jsx 를 연결한다.

- 브라우저 API 인 window.location.hash 를 통해 url 에 접근한다.

- hashchange : 해당 이벤트를 통해 url 변화를 감지한다.

- render() : if/else 를 통하여 경로를 분기 처리 한다.

6) index.html

<!DOCTYPE html> <head> </head> <div id="content" class="container"></div> <script src="js/bundle.js"></script>

- npm run build

'Front-End > ReactJs' 카테고리의 다른 글

[ReactJs] react-router 고차 컴포넌트인 withRouter 사용 (0)	2018.08.16
[ReactJs] react-router 사용하기 (0)	2018.08.16
[ReactJs] 서버사이드 렌더링 (0)	2018.08.12
[ReactJs] node.js를 이용한 react 컴포넌트 렌더링 (0)	2018.08.12
[ReactJs] 리엑트 폼 요소 정의 (0)	2018.08.07

리딩리드

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31