react-router 사용하기
1. react-router
- 리액트의 공식 라이브러리는 아니다. 그러나 react 개발자들의 1/3 정도 사용하고 있다.
2. 프로젝트 구성
1) 폴더
/css
/js
-bundle.js
/jsx
- about.jsx
- app.jsx
- contact.jsx
- posts.jsx
- post.jsx
/node_modules
index.html
package.json
posts.js ----> 데이터
webpack.config.js
2) index.html
<!DOCTYPE html> <head> <link href="css/bootstrap.css" type="text/css" rel="stylesheet"/> <link href="css/main.css" type="text/css" rel="stylesheet"/> </head> <div id="content" class="container"></div> <script src="js/bundle.js"></script>
3) package.json
{ "name": "router", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "./node_modules/.bin/webpack -w", "i": "rm -rf ./node_modules && npm cache clean && npm install" }, "author": "Azat Mardan", "license": "MIT", "babel": { "presets": [ "react" ] }, "devDependencies": { "babel-core": "6.11.4", "babel-loader": "6.2.4", "babel-preset-react": "6.5.0", "history": "2.1.2", "react": "15.2.1", "react-dom": "15.2.1", "react-router": "2.6.0", "webpack": "1.12.9" }}
- webpack, history 등 상당히 낮은 버전을 사용하고 있다(주의)
- history 는 버전 2.x 에서 지원이 종료되어 대신 context.router 를 사용할 수 있다.
4) webpack.config.js
module.exports = { entry: './jsx/app.jsx', output: { path: __dirname + '/js/', filename: 'bundle.js' }, devtool: '#sourcemap', stats: { colors: true, reasons: true }, module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules)/, loader: 'babel-loader' } ] }}
5) Content.jsx
const React = require('react')const {Link} = require('react-router')class Content extends React.Component { render() { return ( <div> <h1>Node.University</h1> <div className="navbar navbar-default"> <ul className="nav nav-pills navbar-nav "> <li className={(this.context.router.isActive('/about'))? 'active': ''}> <Link to="/about" activeClassName="active"> About </Link> </li> <li className={(this.context.router.isActive('/posts'))? 'active': ''}> <Link to="/posts" activeClassName="active"> Blog </Link> </li> <li className={(this.context.router.isActive('/contact'))? 'active': ''}> <Link to="/contact" activeClassName="active"> Contact Us </Link> </li> <li> <Link to="/login" activeClassName="active"> Login </Link> </li> </ul> </div> {this.props.children} </div> ) }}Content.contextTypes = { router: React.PropTypes.object.isRequired}module.exports = Content
- 부모 Route로 정의될 Content 컴포넌트이다.
- isActive() : true/false 를 반환하며 router 의 상태를 알 수 있다.
- contextType : this.context.router를 사용할 수 있도록 정적 클래스 속성인 contextType을 정의 해야한다. router 를 필수(require) 로 설정해 놓으면 this.context.router.isActive('/about')로 접근할 수 있게 되어 특정 경로가 활성화 되었음을 알 수 있다.
- Link : 내비게이션 링크 생성
- {this.props.children} : 자식 컴포넌트를 렌더링한다.
6) about.jsx
const React = require('react')module.exports = function About() { return <div> is home to top-notch Node education which brings joy to JavaScript engineers. </div>}
7) posts.jsx
const {Link} = require('react-router')const React = require('react')module.exports = function Posts(props) { return <div>Posts <ol> {props.route.posts.map((post, index)=> <li key={post.slug}><Link to={`/posts/${post.slug}`} >{post.title}</Link></li> )} </ol> </div>}
- post 에 있는 데이터 리스트를 화면에 출력한다.
8) post.jsx
const React = require('react')module.exports = function Product(props) { console.log(props); let post = props.route.posts.find(element=>element.slug === props.params.id) return ( <div> <h3>{post.title}</h3> <p>{post.text}</p> <p><a href={post.link} target="_blank">Continue reading...</a></p> </div> )}
- 개별 데이터를 불러와서 화면에 노출한다.
- 매개 변수로 데이터를 전달한다.
- this.props.NAME 을 이용하여 다양한 정보에 접근이 가능하다(location, history, params, route, routeParams, routes)
9) post.js
module.exports = [{ slug: 'http2', title: 'Implementing HTTP/2 with Node.js and Express', text: 'The modern Internet with its TCP/IP protocol started around 1975 which is astonishing 41 years ago. For the most part of its existence, we used HTTP and it’s successor HTTP/1.1 (version 1.1) to communicate between clients and servers.' }, { slug: 'es6', title: 'Top 10 ES6 Features Every Busy JavaScript Developer Must Know', text: 'This essay will give you a quick introduction to ES6. If you don’t know what is ES6, it’s a new JavaScript implementation...' }, { slug: 'you-dont-know-node', title: 'You Don\'t Know Node: Quick Intro to Core Features', text: 'This is a kitchen sink of subjectively the most interesting core features. The key takeaways of this essay are:...' }]
- 데이터
'Front-End > ReactJs' 카테고리의 다른 글
| [ReactJs] 브라우저 히스토리 vs 해시 히스토리 (0) | 2018.08.16 |
|---|---|
| [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 |
리딩리드