[ReactJs] react-router 사용하기

Front-End/ReactJs 2018. 8. 16. 13:07

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> <a href="http://Node.University" target="_blank">Node.University</a> 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', link: 'http://webapplog.com/http2-node/', 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', link: 'http://webapplog.com/es6/', 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', link: 'http://webapplog.com/you-dont-know-node/', 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

리딩리드

일	월	화	수	목	금	토
			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