티스토리 뷰

새해 복들 많이 받았길 바란다.(시간이 좀 늦긴 했지만)

코드 짜는 개발쟁이들이 복 마저 덜 받으면 한해가 고생이니 잘 챙겨서 받았기를 바란다.



오늘은 설연휴동안 포스팅 못한 Router와 관련된 페이지 이동과 관련한 심화 학습을 하려고 한다.

페이지 이동은 지난 시간에 잠깐 다뤘지만 하위 페이지 로딩을 어떻게 해야할지 잘 모를 수도 있겠다는 생각에 친절을 배풀어 알려주려고 하니 잘 보고 따라해보기를 바란다.


일단 페이지의 UI 구조는 지난번 코드를 참고하길 바란다. 우리가 만들려고 했던 페이지의 구조를 다시 한번 확인해보면 아래와 같다.



이 구조를 코드로 바꾸면 아래와 같이 코딩할 수 있다고 했다.


export const ROUTES:Routes = [
    { path: '', component: IndexComponent },
    {
        path: 'user',
        component: UserComponent,
        children: [
            { path: 'signin', component: SignInComponent },
            {
                path: 'signup',
                component: SignUpComponent,
                children: [
                    {path: 'terms', component: TermsComponent},
                    {path: 'user-info', component: UserInformationComponent},
                    {path: 'signin-complete', component: SignUpCompleteComponent}
                ]
            },
            { path: 'mypage', component: MyPageComponent }
        ]
    },
    {
        path: 'contents',
        component: ContentsComponent,
        children: [
            {
                path: 'introduce',
                component: IntroduceComponent,
                children:[
                    {path: 'about-us', component: AboutUsComponent}
                ]
            },
            {
                path: 'portfolio',
                component: PortfolioComponent,
                children: [
                    {path: 'dashboard', component: DashboardComponent},
                    {path: 'sites', component: SitesComponent},
                    {path: 'erp', component: ErpComponent}
                ]
            },
            { path: 'contact-us', component: ContactUsComponent },
            {
                path: 'board',
                component: BoardComponent,
                children: [
                    {path: 'notice', component: NoticeComponent},
                    {path: 'forum', component: ForumComponent}
                ]
            }
        ]
    }
] 

이 구조의 노드 중 User 쪽 노드의 구성을 보면 아래와 같은 이미지로 표현할 수 있다.



전체를 감싸는 AppComponent가 있고 그 안에 UserComponent를 불러온다. 다시 그 하위의 노드를 불러오고 다시 또 그 하위의 노드를 불러오게 되는 구조라고 보면 이해가 빠르다.


이해가 어려운 사람은 지난번 코드에서 아래의 코드로 수정해서 확인해 보면 조금(?) 이해 할 수 있으리라 본다.


[src/app/app.component.html]

<div>
    <button routerLink="/">인덱스</button>
    <button routerLink="user">유저</button>
    <button routerLink="contents">콘텐츠</button>
</div>
<div>
    <button routerLink="user/signin">로그인</button>
    <button routerLink="user/signup">회원가입</button>
</div>
<router-outlet></router-outlet>


[src/app/view/user/user.component.html]

<p>
  user works!
</p>
<button routerLink="signin">로그인</button>
<button routerLink="signup">회원가입</button>
<button routerLink="mypage">마이페이지</button>
<router-outlet></router-outlet>


이렇게 코드를 수정하면 아래의 화면으로 확인할 수 있을 거다.


이렇게 확인하면 라우팅이 어떻게 동작하는지 이해를 도울 수 있을거라고 생각한다.

한마디로 라우팅 안에 라우팅을 계속 할 수 있고 그 라우팅을 통해 하위 메뉴를 계속해서 생성할 수 있는 계층구조를 이룬다.(Hierarchy 구조)

이를 통해 효율적인 메뉴 이동 코드를 만들 수 있다.


다음 시간엔 이런 라우터를 이용해 파라미터를 전달하는 화면을 알아보는 시간을 가져보도록 하자.


오늘은 여기까지.

댓글
댓글쓰기 폼