'Front-End' 카테고리의 글 목록 (4 Page)

[ReactJs] 브라우저 히스토리 vs 해시 히스토리

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

브라우저 히스토리 vs 해시 히스토리

1. 해시 히스토리

- #기호를 사용하여 페이지를 다시 불러오지않고 탐색한다.

- router/#/posts/http2

- 대부분의 단일 페이지 애플리케이션이 해시를 사용하여 페이지를 완전히 새로고침 하지 않고 앱의 변경을 반영한다.

- 구형 브라우저 구현이 필요하다면 추천한다.

1) 사용법

//해시 히스토리 정의 const ReactRouter = require('react-router') const History = require('history') let hasHistory = ReactRouter.useRouterHistory(History.createHashHistory)({ queryKey:false }) <Router history={hashHistory}/> //React Router 에 포함된 해시 히스토리 에서 사용 const {hashHistory} = require('react-router') <Router history={hasHistory}/>

- history를 초기화할 때 queryKey 를 false 로 설정하여 성가신 쿼리 스트링(?_k=vl8reh)방지한다

- queryKey 는 오래된 브라우저를 지원하고 탐색할 때 상태를 전달하기 위해 설정된 기본값이다.

2. 브라우저 히스토리

- 해시 히스토리는 url에 #값이 표시된다. 브라우저 히스토리는 이를 방지한다

- router/posts/http2

- 서버측의 설정이 필요하다.

- 브라우저 히스토리는 해시를 사용하지 않는 실제 url 를 사용하기 때문에 각각의 요청이 서버로 전송된다. 그렇기에 어떤 url 이든 같은 파일로 응답하도록 한다.

1) 사용법

const {browserHistory} = require('react-router') <Router history={browserHistory}/>

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

[ReactJs] Redux를 이용한 React앱 개발 (0)	2018.08.16
[ReactJs] Redux 란? (1)	2018.08.16
[ReactJs] react-router 고차 컴포넌트인 withRouter 사용 (0)	2018.08.16
[ReactJs] react-router 사용하기 (0)	2018.08.16
[ReactJs] react router 처음부터 만들기 (0)	2018.08.16

리딩리드

,

[ReactJs] react-router 고차 컴포넌트인 withRouter 사용

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

react-router 고차 컴포넌트인 withRouter 사용

1. withRouter

- 컴포넌트에서 router 에 접근하는 방법 중 하나이다.

- 정적 클래스 속성인 contextTypes 를 설정하여 this.context.router 로 접근하는 방법 보다는 withRouter 로 접근하는 방법을 선호한다.

- withRouter 는 고차 컴포넌트로 컴포넌트를 인자로 받아 router 에 주입하고 다른 컴포넌트를 반환한다.

2. 사용예

const {withRouter} = require('react-router') <Router history={hashHistory}> <Route path="/" component={Content} > <Route path="/about" component={About} /> <Route path="/contact" component={withRouter(Contact)}/> ..... </Route> </Router>

1) 컴포넌트에서 접근

- 함수의 첫 번째 인자로 전달된 객체의 속성을 통해 router 객체에 접근한다.

const React = require('react') module.exports = function Contact(props){ props.router - Good return <div>.....

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

[ReactJs] Redux 란? (1)	2018.08.16
[ReactJs] 브라우저 히스토리 vs 해시 히스토리 (0)	2018.08.16
[ReactJs] react-router 사용하기 (0)	2018.08.16
[ReactJs] react router 처음부터 만들기 (0)	2018.08.16
[ReactJs] 서버사이드 렌더링 (0)	2018.08.12

리딩리드

,

[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

리딩리드

,

[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

리딩리드

,

'Front-End'에 해당되는 글 170건

[ReactJs] 브라우저 히스토리 vs 해시 히스토리

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

[ReactJs] react-router 고차 컴포넌트인 withRouter 사용

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

[ReactJs] react-router 사용하기

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

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

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

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2024/05 »
일	월	화	수	목	금	토
			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