[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로 이동했을 때

Header, Body, Footer가 다 있는 App Component에서 

Body만 존재하는 Repos Component로 화면을 전환하게 되는 겁니다. 

그렇다고해서 

Repos Component에 

Header, Body, Footer를 다 담으면, 이건 React의 장점인 View의 모델화가 아니게되겠지요? 

React의 장점은 모듈화 아니겠습니까?

전체를 담는 App속에는 

Header를 담당하는 녀석,

Body를 담당하는 녀석, 

Footer를 담당하는 녀석,

Body에서도 여러가지 내용을 담을 Repos, About과 같은 Component들이 있도록 구성을 해야합니다.

그리고 각 Component는 본인의 View만 담당해야 하구요.

이러한 방식을 위해서 Nested Route가 사용됩니다. 

이제 본래 예시로 돌아가보겠습니다.

       +-------------------------------------+
         | Home Repos About                    | <- App
         +------+------------------------------+
         |      |                              |
Repos -> | repo |  Repo 1                      |
         |      |                              |
         | repo |  Boxes inside boxes          |
         |      |  inside boxes ...            | <- Repo
         | repo |                              |
         |      |                              |
         | repo |                              |
         |      |                              |
         +------+------------------------------+

이와 같은 화면 구성을 위해서 필요한 것은 

Nested Route를 통한 Nested UI를 구현해야합니다. 

말 그대로 Route를 겹쳐서 공유하기 위해서 다음과 같이 index.js와 App.js를 구성을 하면 됩니다. 

// index.js
// ...
render((
  
    
      {/* make them children of `App` */}
      
      
    
  
), document.getElementById('app'))

위 Route구조를 간단히 보면 

<Route path="/" ~ >

 <Route path="/repos ~/>

</Route>

"/repos"가 "/"의 하위에 있기 때문에 단순히 "Repos" Component만 rendering하는 것이 아니라, 부모인 App Component로 rendering하게 됩니다.

// modules/App.js
// ...
  render() {
    return (
      

        
Ghettohub Issues
        

          
About
          
Repos
        

        {/* add this */}
        {this.props.children}

      
    )
  }
// ...

이를 위해서 부모인 App.js에서는 하위 component(Repos, About)을 출력하기 위해 

{thsi.props.children}을 새롭게 추가해주었습니다.