router-view

vue-router를 사용하여 중첩 된 라우트 구성을 이용할 수 있다.

아래는 공식 문서에 있는 예시를 가져온 것이다.

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

이를 이용하여 이번 mini project에 이용을 해 보았다.
적용한 곳은 로그인/회원가입 페이지, 마이페이지, 제품검색 페이지, admin 페이지이다.

내가 조장을 맡아서 어떻게 페이지를 만들까 고민하다가 router-view를 찾게 되었고 모든 페이지에 적용 하였스며, 이후 수업시간에 강사님이 이 내용을 다뤄주셨다.

사용 법

이용 방법은 단순하다. 아래의 코드는 실제로 내가 작성한 코드의 일부분을 예시로 가져왔다.

routes: [
    { 
      path: '/mypage', 
      component: MyPage,
      children: [
        {
        // /mypage/userinfo 와 일치 할 때
        // UserProfile은 MyPage <router-view> 내에 렌더링 된다.
          path: 'userinfo',
          component: UserInfo
        },
        {
          // /user/accountlist 과 일치 할 때
          // AccountList MyPage <router-view> 내에 렌더링 된다.
          path: 'accountlist',
          component: AccountList
        }
	]
  }
]

path에는 기본 경로를, children에는 router-view에 렌더링 되는 부분이라고 생각하면 된다.
그리고 렌더링 되는 children 부분에는 path앞에 '/'를 쓰지 않는다.

여기서 잠깐 일반적으로 path만 사용하는 경우와의 차이점을 알아보자.
일반적으로 path로 경로가 바뀌게 되면 화면 자체를 새로 렌더링을 하게 된다.
하지만 여기서 중첩 라우트를 이용하게 되면 children 경로의 내용만 새로 렌더링이 되므로 화면 자체를 새로 렌더링을 하지 않는 차이점이 있다.

이를 이용하면 modal과 같은 창들도 쉽게 만들어서 사용할 수 있다.

다시 돌아와서 위의 예시를 보기 편하게 바꿔보면 다음과 같다.

/user/userinfo                        /user/accountlist
+------------------+                  +-----------------+
| mypage           |                  | mypage          |
| +--------------+ |                  | +-------------+ |
| | UserInfo     | |  +------------>  | | AccountList | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

위의 모습을 보면 이해하기 쉬울 것이다.

MyPage 바탕 안에서 UserInfo와 AccountList만을 바꾸게 되면 페이지를 구현할 때, MyPage 스타일링 한 부분을 계속해서 가져오지 않아도 안에 내용만 바뀌게 되므로 자원도 절약되고 구현도 간단하게 할 수 있다.

하지만 프로젝트를 진행하면서 생각지도 못한 문제점을 보게 됐다...

그것은 바로 경로를 /mypage만 입력했을 때다!
현재 설정한 경로들을 보면 당연히 처음 페이지를 들어갈 때 /mypage/userinfo와 같이 뒤에 경로가 붙은 경우만 생각하게 된다.

당연하게도 /mypage로 접속했을 때를 고려하지 못했던 것이였다..

해결 방법은 아주 간단했다. 그냥 MyPageMain이라는 vue파일을 하나 만들고 경로를 '' 로 설정 해주는 것이였다.

routes: [
    { 
      path: '/mypage', 
      component: MyPage,
      children: [
        {
          path: '',
          component: MyPageMain,
        },
        {
        // /mypage/userinfo 와 일치 할 때
        // UserProfile은 MyPage <router-view> 내에 렌더링 된다.
          path: 'userinfo',
          component: UserInfo
        },
        {
          // /user/accountlist 과 일치 할 때
          // AccountList MyPage <router-view> 내에 렌더링 된다.
          path: 'accountlist',
          component: AccountList
        }
	]
  }
]

위의 코드처럼 작성을 하게 되면 경로에 /mypage만 입력했을 경우 MyPageMain이 렌더링이 된다.

이것으로 간단하게 중첩된 라우트의 이용 방법과 내가 부딪힌 문제의 해결 방법을 알아 보았다.

아래의 링크에 중첩된 라우트에 대한 공식 문서와 내가 진행한 프로젝트 github와 netlify로 배포한 사이트 주소를 남길테니 누군가 이 글을 본다면 한 번 참고해 봐도 좋을 것 같다!

공식문서 : https://v3.router.vuejs.org/kr/guide/essentials/nested-routes.html
미니 프로젝트 netlify : https://maplestorymarket.netlify.app/
미니 프로젝트 github : https://github.com/SeungHun6450/vue-project-team6