본문 바로가기

React/메모 프로젝트

#2. React-Router

React-Router란?



 Apache와 같은 웹서버에서는 url에 맞는 파일을 제공하여 여러 페이지를 구현하는 것과 달리, 어떤 경로로 들어오든 간에 똑같은 html파일과 자바스크립트 파일을 제공한다. 

 여기서 제공되는 js파일 안에는 모든 컴포넌트들이 담겨있고  url에 따라 지정된 컴포넌트들을 랜더링 해준다. 즉, 페이지를 한번 로드한 이후 다른 페이지로 이동 시, 페이지를 처음부터 로딩하지 않고 js 파일을 이용하여 기존 컴파운드를 언마운트시키고 다른 컴포넌트를 마운트한다. 

 예를 들어 웹의 헤더 컴포넌트와 같은 것을 처음부터 렌더링하지 않고 그대로 유지할 수 있다는 소리.


React-Router v3 vs v4?



 예제 프로젝트는 v3이여서 구현할 때 v4로 바꿔줘야 했다. 


    • IndexRoute : Route에서 sub-Route가 주어지지 않았을 때, 즉 App/으로 들어왔을 때, Home
                      컴포넌트를 보여주겠다.
                       v4에서는 IndexRoute가 사라지고 exact path 속성이 생김



    [ src/index.js ]





[ src/containers/App.js ]
nested Router가 사라지고, 해당 <div> 밑에 Router를 넣어줌. 왜 이렇게 하는지는 추후에 알아봐야지





'React > 메모 프로젝트' 카테고리의 다른 글

#3. Reducer  (0) 2017.06.05
#2. React-Router  (0) 2017.06.05
#1. 서버 구성 - 라우팅  (0) 2017.06.03