부록. React Router v4 ( pre release )

Github URL : https://github.com/ReactTraining/react-router/tree/v4

Docs : https://react-router.now.sh/

React Router 가 pre release 되어서 우리 프로젝트 진행하는것도 v4 로 올려서 진행해보려고 한다.

이유?? 사실 자세히 공부하고, 혹은 경험하고 바꾸는 것은 아니다. 이전에도 React router 를 잘 써본적은 없으니... ㅜㅠ 그래도 먼가 새로 나왔고, 그걸로 바뀔거라면 미리 대비하는게 좋지 않을까 해서 지금 있는 버전을 올려 사용하려 한다.

Why the huge change? 사실 Github 문서에 보면 Declarative Composability 이란 용어가 나온다. 요기에 내용 잘 읽어보면 왜 바뀌었는지 히스토리를 파악할 수 있을 것이다.

Setting

$ npm install --save react-router@next

설치하고 나면 package.json 에 "react-router": "^4.0.0-alpha.3"가 추가된것을 볼 수 있을것이다. 시간이 지나면 뒤에 버전 숫자나 영어는 바뀌겠지만 말이다.. +_+

코드 안에서는 이와 같이 쓰면 된다

// using an ES6 transpiler, like babel
import { BrowserRouter, Match, Link } from 'react-router'

First Principles

3가지의 중요한 개념이 있다. componets, location, Match

 - Router 또한 모든것이 컴포넌트이다. <Router ... /> 이런거 많이들 보셨죠?? ( Everything is a component; so, if you know React, you know React Router. )

 - location 은 window.location 과 비슷하다. path 정보들에 대해 담고 있다. ( A location is data that represents where a visitor is–or wants to go–in your app. It looks just like window.location. )

 - Match 엘리먼트는 현재 url path 와 비교해서 화면에 무엇을 뿌릴지 결정해주는 element 이다. 뒤에서 많이 사용할 것 같으니 여기까지만 간략하게 설명하자 ( <Match/> turns a location into UI. )

자세한 내용들은 다음에 하기로 하고... 일단은 index.js 파일만 변경해서 사용하겠다.

개발하면서 추가로 알게되는 내용들은 해당페이지에 추가해야지.. +_+

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import { BrowserRouter, Match } from 'react-router';
import { App, ContentList, ContentDetail } from './containers';


ReactDOM.render(
  
    
        
        
    
  ,
  document.getElementById('root')
);