Computer Science/ReactJS 썸네일형 리스트형 [React Router] redirect [React Router] redirect 웹 어플리케이션 개발을 하다보면 응답에 따라 페이지를 전환해야 하는 경우가 빈번하다. React Router를 사용할 경우 다음과 같이 해결한다. React Router 2.x.x 를 사용하고 있다. 1. 사용하는 history를 불러온다. import { browserHistory } from 'react-router'; 2. 원하는 url을 삽입한다. browserHistory.push(url); (주의) url변경에 따른 화면 전환만 일어날 뿐, rendering을 새로 하지는 않습니다. 더보기 [React Router] Server Rendering React Router Server Rendering 기존에 React Router를 사용할 때 browserHistory를 사용했다. Router의 Route Component들로 인하여 초기 메인화면에 접속하면 모든 Component들이 만들어지고, route되는 경로에 맞는 Component들이 바뀌는 방식이었다. 이때, 화면을 새로고침 시 해당 URL로 http request가 전송되게 된다. 처음에 매우 당황스러웠다. 이를 해결하기 위해, server파일에 다음을 추가해준다. app.get('*', function (req, res) { res.sendfile(path.join(__dirname, '..', '..','home.html')) }) 서버로 요청되는 모든 요청에 대해서, 기본적으로 .. 더보기 [React Router] 08. Index Routes React Router 08. Index Routes소스코드 : https://github.com/reactjs/react-router-tutorial/tree/master/lessons/08-index-routes 초기 어플리케이션 방문 시 , React Route에 따라 빈 페이지가 나오게 됩니다.더이상 빈 페이지가 아니라, 초기 Home Component를 보여주고 싶습니다. 일단, Home Component를 만들어볼까요. // modules/Home.js import React from 'react' export default React.createClass({ render() { return Home } }) 기존의 App Component("/)에 다른 하위 Component가 있다면, Ho.. 더보기 [React Router] 06. Params React Router 06. URL Params소스코드 : https://github.com/reactjs/react-router-tutorial/tree/master/lessons/06-params Spring에서와 같이 URL Parameter를 획득하여 사용할 수 있습니다. 예를 들어, /repos/rackt/react-router /repos/facebook/react와 같은 URL이 있을 경우 /repos/:userName/:repositoryName 와 같은 URL Parameter를 통해 각 parameter를 얻을 수 있습니다. rackt, facebook -> userNamereact-router, react -> repositoryName 에 각각 mapping됩니다. 위 방식으로 얻.. 더보기 [React Router] 04. Nested Routes React Router 04. Nested Routes소스코드 : https://github.com/reactjs/react-router-tutorial/tree/master/lessons/04-nested-routes 조금은 난해할 수도 있는 Nested Routes입니다. 지금까지 예제의 Route 구조는 다음과 같습니다. "/" -> App component "/repos" -> Repos component" /about" -> About component 보통 웹 프론트엔드 개발 시 화면은 다양하게 구성될 수 있지만 보통 Header, Nav, Body, Footer등등으로 구분합니다. 이때 위 Route구조대로 작업을 하게 되면 http://localhost:8080/repos로 이동했을 때He.. 더보기 [React Router] 03. Navigating with Link React Router 03. Navigating with Link 소스코드 : https://github.com/reactjs/react-router-tutorial/tree/master/lessons/03-navigating-with-link 아마도 우리의 앱에서 가장 많이 사용되는 Component는 Link일 것이다.Link는 우리가 아는 태그의 기능과 유사한 역할을 하는 Router의 Component이다. // modules/App.js import { Link } from 'react-router' export default React.createClass({ render() { return ( React Router Tutorial About Repos ) } }) 이제 http://loc.. 더보기 [React Router] 02. Rendering a Router React Router 02. Rendering a Router예제 소스코드 : https://github.com/reactjs/react-router-tutorial/tree/master/lessons/02-rendering-a-route React Router는 Component이다. 기본적으로 예시에 사용되는 index.html은 다음과 같다. My First React Router App webpack을 통해 index.js-> bundle.js로 패키징된다. 우선 index.html에 사용될 Component를 가지는 index.js에1. import Router, Route2. render Router 2가지 작업을 추가한다. // ... import { Router, Route, hashHi.. 더보기 [React Router] 01. Setting Up React Router 01. SettingUp소스코드 : https://github.com/reactjs/react-router-tutorial/tree/master/lessons/01-setting-up React Router 예제를 따라하기에 앞서당연하지만 nodeJS와 NPM이 설치되어 있어야 한다. git clone https://github.com/reactjs/react-router-tutorial cd react-router-tutorial cd lessons/01-setting-up npm install npm start 위 과정을 진행한 후 http://localhost:8080 에 접속하면, 브라우저에 "Hello React Router" 메시지가 출력되는 것을 확인할 수 있다. 더보기 [React Router] 00. React Router React Router AngularJS의 양방향 데이터 바인딩이 편하기는 했으나, 데이터가 많아질 경우 속도 저하의 부담이 있어서 이번 개인프로젝트에는 React를 사용하려고했다. AngularJS의 UI Router와 마찬가지로 ReactJS에도 'React Router'라는 Router가 존재한다. 처음에 무턱대고 React Router를 사용해서 개발을 진행하였으나 , 예제 및 개념에 대해서 자세히 보지않고 진행했다가 페이지 새로고침 시 해당 path에 대한 handler가 없다는 당황스러운 상황을 겪었었다. 아직 React Router에 대해서 정보도 부족해 보이기에 공부하는 차원에서 예제 번역 및 React Router에 대한 정보를 올리기로 결정하였다. 더보기 이전 1 다음