Q1: Vue Router에서 동적 라우팅이란 무엇인가요?
동적 라우팅은 URL 경로에서 변수 값을 받아 해당 값에 따라 다른 컴포넌트를 렌더링하거나 데이터를 로드하는 기능입니다. 예를 들어, `/user/123`에서 `123`은 동적 세그먼트로, 특정 사용자 ID를 의미합니다.
Q2: Vue Router에서 동적 라우트를 어떻게 정의하나요?
라우트 경로에서 변수 부분을 콜론(`:`)으로 표시합니다. 예를 들어:
```js
const routes = [
{
path: '/user/:id',
component: UserProfile
}
]
```
여기서 `:id`가 동적 세그먼트로, 접근할 때 `/user/123`처럼 적용됩니다.
Q3: 컴포넌트 내에서 동적 세그먼트 값을 어떻게 가져오나요?
컴포넌트에서는 `this.$route.params` 객체에서 동적 세그먼트 값을 참조할 수 있습니다.
```js
mounted() {
const userId = this.$route.params.id;
// userId를 사용해 API 요청 등 처리
}
```
Q4: Vue 3 + Vue Router 4에서 Composition API를 사용할 때는 어떻게 접근하나요?
`useRoute` 훅을 사용해 현재 라우트 정보를 가져옵니다.
```js
import { useRoute } from 'vue-router';
export default {
setup() {
const route = useRoute();
const userId = route.params.id;
return { userId };
}
}
```
Q5: 동적 라우트 변경 시 컴포넌트가 재활성화되지 않는 문제는 어떻게 해결하나요?
기존 컴포넌트가 재사용되어 `mounted` 훅이 다시 실행되지 않을 수 있습니다. 이 경우 `watch`로 `route.params`를 감지합니다.
```js
watch(() => route.params.id, (newId) => {
// id가 변경될 때마다 처리
});
```
또는 `beforeRouteUpdate` 가드를 사용할 수 있습니다.
Q6: 동적 라우팅에서 이름 있는 라우트를 정의하는 방법은?
`name` 속성을 지정해 라우트를 이름으로 참조할 수 있습니다.
```js
{
path: '/user/:id',
name: 'UserProfile',
component: UserProfile
}
```
이후 다음처럼 링크를 생성할 수 있습니다.
```html
유저 프로필
```
Q7: URL에 여러 개의 동적 세그먼트를 넣는 방법은?
경로에 여러 콜론 세그먼트를 넣으면 됩니다.
```js
{
path: '/user/:userId/post/:postId',
component: UserPost
}
```
`$route.params.userId`, `$route.params.postId`로 접근합니다.
Q8: 동적 라우트에 쿼리 파라미터도 함께 사용하는 방법은?
쿼리 파라미터는 동적 라우트와 별도로 `this.$route.query`를 통해 접근합니다.
예: `/user/123?tab=posts`에서 `tab`은 쿼리 파라미터입니다.
```js
const tab = this.$route.query.tab;
```
Q9: 동적 라우트의 동작을 이해하기 위한 요약은?
- 경로 변수는 콜론(`:`)으로 지정
- 변수 값은 `this.$route.params` 또는 `useRoute()`의 `params`에서 참조
- 라우트 이름을 지정해서 편리하게 링크 생성 가능
- 동적 변수 변경 시 주의: 컴포넌트 재활성화가 되지 않을 수 있어 `watch` 또는 라우트 가드 필요
---
요약하자면, Vue Router에서 동적 라우팅의 기본 패턴은 경로에 `:parameter`를 붙여 변수로 사용하고 컴포넌트에서 `route.params`로 값을 활용하는 것입니다. 이를 통해 유연한 URL 구조와 페이지 구성이 가능합니다.
Vue.js에서 <a href='https://sangseek.com/sangseeks/Vue Router/ko'>Vue Router</a>의 동적 라우팅(dynamic routing)은 애플리케이션의 URL 경로에 따라 동적으로 컴포넌트를 로드할 수 있는 기능을 제공합니다. 이를 통해 사용자는 URL의 일부를 변수로 사용하여 다양한 페이지를 쉽게 생성할 수 있습니다. 동적 라우팅은 주로 사용자 프로필, 게시물, 상품 상세 페이지 등과 같은 경우에 유용합니다. 1. Vue Router 설치 및 설정 먼저, Vue Router를 설치해야 합니다. Vue CLI를 사용하여 프로젝트를 생성한 경우, Vue Router를 설치할 수 있습니다. ```bash npm install vue-router ``` 설치 후, `src/router/index.js` 파일을 생성하거나 기존 파일을 수정하여 라우터를 설정합니다. 2. 동적 라우트 정의 동적 라우트를 정의하려면, 라우트 경로에 콜론(`:`)을 사용하여 변수를 지정합니다. 예를 들어, 사용자 프로필 페이지를 만들고 싶다면 다음과 같이 설정할 수 있습니다. ```javascript import Vue from 'vue'; import Router from 'vue-router'; import UserProfile from '../components/UserProfile.vue'; Vue.use(Router); const routes = [ { path: '/user/:id', // 동적 라우트 name: 'UserProfile', component: UserProfile, }, ]; const router = new Router({ mode: 'history', // 해시 모드 대신 <a href='https://sangseek.com/sangseeks/히스토리/ko'>히스토리</a> 모드 사용 routes, }); export default router; ``` 위의 코드에서 `:id`는 동적 세그먼트로, URL에서 사용자 ID를 받아올 수 있습니다. 3. 컴포넌트에서 동적 파라미터 사용 동적 라우트에서 전달된 파라미터는 컴포넌트에서 `this.$route.params`를 통해 접근할 수 있습니다. 예를 들어, `UserProfile.vue` 컴포넌트에서 사용자 ID를 가져오는 방법은 다음과 같습니다. ```vue <template> <div> <h1>User Profile</h1> <p>User ID: 이중 중괄호 열기 userId 이중 중괄호 닫기</p> </div> </template> <script> export default { computed: { userId() { return this.$route.params.id; // 동적 파라미터 접근 }, }, }; </script> ``` 4. 동적 라우팅의 활용 동적 라우팅은 다양한 상황에서 활용될 수 있습니다. 예를 들어, 게시물 상세 페이지를 만들고 싶다면 다음과 같이 설정할 수 있습니다. ```javascript import PostDetail from '../components/PostDetail.vue'; const routes = [ { path: '/post/:postId', // 동적 라우트 name: 'PostDetail', component: PostDetail, }, ]; ``` 그리고 `PostDetail.vue`에서 `postId`를 가져와서 해당 게시물의 데이터를 로드할 수 있습니다. 5. 네비게이션 및 링크 동적 라우팅을 사용할 때는 `router-link`를 사용하여 링크를 생성할 수 있습니다. 예를 들어, <a href='https://sangseek.com/sangseeks/사용자 목록/ko'>사용자 목록</a>에서 각 사용자의 프로필로 이동하는 링크를 만들 수 있습니다. ```vue <template> <div> <h1>User List</h1> <ul> <li v-for="user in users" :key="user.id"> <router-link :to="{ name: 'UserProfile', params: { id: user.id } }"> 이중 중괄호 열기 user.name 이중 중괄호 닫기 </router-link> </li> </ul> </div> </template> <script> export default { data() { return { users: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, ], }; }, }; </script> ``` 6. 추가적인 고려사항 - 네스트된 라우트 : 동적 라우팅은 네스트된 라우트와 함께 사용할 수 있습니다. 예를 들어, `/user/:id/posts`와 같은 경로를 정의하여 특정 사용자의 게시물 목록을 보여줄 수 있습니다. - 라우트 가드 : 동적 라우트에 대해 인증이나 권한 검사를 수행할 수 있는 라우트 가드를 설정할 수 있습니다. - 404 페이지 처리 : 동적 라우트가 잘못된 경우를 처리하기 위해 404 페이지를 설정하는 것도 좋은 방법입니다. 결론 Vue.js에서 Vue Router의 동적 라우팅은 URL 경로에 따라 다양한 컴포넌트를 동적으로 로드할 수 있는 강력한 기능입니다. 이를 통해 사용자 경험을 향상시키고, 더 나은 구조의 애플리케이션을 만들 수 있습니다. 동적 라우팅을 적절히 활용하면, 복잡한 애플리케이션에서도 유연하고 직관적인 네비게이션을 제공할 수 있습니다.
