Nested Router 실습

드디어 실습인가!!

 

두둥!!

 

만약 Nested Router를 이용하여 여러개의 컴포넌트를 동시에 표현하려고 한다면 아래 그림처럼 해보자!

 

step 1.

 

step 2.

 

step 3.

여기서 잠깐!

children??? 

그렇다. 이전 시간에는 component 속성 값만 작성했다. 하지만 오늘을 children까지 설정해보자!

첫 번째 router를 바탕으로 설명하자면 아래와 같은 의미가 되겠다.

: login으로 접속했을 때, Nested Router을 이용하여 Login과 LoginFrom을 둘 다 뛰우겠다.

 

그럼 이제 어떻게 저 두 개 컴포넌트! 아니지~ 총 4개의 컴포넌트를 등록한다는 말인가???

그것도 두개씩 묶어서???

그 방법은 아래에!!

 

step 4.

 

Login과 LoginForm을 대표로 설명하자면~

Login "template"에 작성한 코드를 보자.

 

` ......

`

 

이런 방식으로 코드가 작성되어있다.

 

그 코드 안에서 LoginForm이 명시되어있는 것을 발견할 수 있다.

이를 통해 등록한 LoginForm 컴포넌트의 내용이 Login 쪽 코드 안으로 들어가게 된다.

 

요렇게 말이다..

 

 

그 결과 코드를 Chrome으로 확인해보면, 

"Go to Login" 클릭 시 

 

"Go to List" 클릭 시

 

 

 

 

그런데 코드를 작성하다보니 단점이 있었다.

template 작성 시 알 수 있었던 문제!!

만약, 코드에 오타가 들어있다면~ 어느 부분이 어떻게 틀렸는지 알기 힘든 상황이 있다.

따라서 코드를 구조화하여 사용하는 것이 바람직하다고 한다.