본문 바로가기

[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.. 더보기