Vue.js는 현대적인 웹 애플리케이션을 개발하는 데 강력한 도구로, 페이지 간 파라미터 전송은 웹 애플리케이션의 핵심 요소 중 하나입니다. 사용자의 입력 데이터, 동적 URL, 필터링 정보 등을 페이지 간에 전달하는 방법을 이해하고 구현하는 것은 중요한 개발 과제입니다. 이번 포스팅에서는 Vue.js에서 페이지 간 파라미터 전송을 다루는 세 가지 주요 방법을 살펴보겠습니다.
1. 라우터 파라미터 (Route Parameters)
라우터 파라미터는 Vue Router를 통해 페이지 간에 파라미터를 전송하는 강력한 방법 중 하나입니다. 이 방법은 주로 동적 라우팅을 구현하는 데 사용됩니다. 예를 들어, 사용자 프로필 페이지에서 사용자 ID를 동적으로 전달하고자 할 때 유용합니다.
라우터 파라미터 설정
라우터에서 동적 파라미터를 설정하려면 라우트 정의에서 path에 콜론( : )을 사용하여 파라미터 이름을 지정합니다.
const routes = [
{
path: '/user/:id', // ':id' 파라미터 정의
component: UserProfile,
},
];라우터 파라미터 사용
라우터 파라미터를 사용하여 페이지로 이동할 때 파라미터를 전달할 수 있습니다.
// 프로그래밍 방식으로 라우트로 이동할 때 파라미터 전달
this.$router.push({ path: '/user/123' }); // ':id' 파라미터에 123 전달컴포넌트에서 라우터 파라미터 접근
라우터 파라미터에 접근하려면 컴포넌트 내에서 $route.params를 사용합니다.
<template>
<div>
<p>User Profile 페이지</p>
<p>User ID: {{ $route.params.id }}</p>
</div>
</template>2. 쿼리 문자열 (Query String)
URL의 쿼리 문자열을 사용하여 파라미터를 전달하는 방법은 간단하고 일반적입니다. 이 방법은 페이지 간 간단한 데이터 전달에 적합합니다.
URL의 쿼리 문자열 예제
/user?id=123&name=John컴포넌트에서 쿼리 파라미터 접근
컴포넌트 내에서 $route.query를 사용하여 쿼리 파라미터에 접근합니다.
// 컴포넌트 내에서 쿼리 파라미터에 접근
const userId = this.$route.query.id; // 123
const userName = this.$route.query.name; // "John"3. 상태 관리 패턴 (State Management Pattern)
Vuex와 같은 상태 관리 라이브러리를 사용하면 애플리케이션 전체에서 상태를 공유하고 파라미터를 전달할 수 있습니다. 이 방법은 애플리케이션 규모가 크거나 여러 컴포넌트 간에 데이터를 공유해야 할 때 유용합니다.
Vuex를 사용한 상태 관리 예제
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
userId: null,
},
mutations: {
setUserId(state, userId) {
state.userId = userId;
},
},
});// 컴포넌트에서 상태 변경 및 파라미터 전달
this.$store.commit('setUserId', 123); // 상태 변경
const userId = this.$store.state.userId; // 상태 읽기어떤 방법을 선택할까요?
어떤 파라미터 전송 방법을 선택할지는 상황과 요구사항에 따라 다릅니다.
- 라우터 파라미터: 동적 라우팅이 필요한 경우에 유용하며, 페이지 간의 관계를 나타내기 위해 사용됩니다.
- 쿼리 문자열: 간단한 데이터 전송에 적합하며, 주로 검색 및 필터링과 같은 간단한 작업에 사용됩니다.
- 상태 관리 패턴: 애플리케이션 규모가 크거나 상태를 공유해야 하는 경우에 유용하며, 전역 상태 관리에 사용됩니다.
이러한 방법 중 적절한 것을 선택하여 Vue.js 애플리케이션을 개발하는 데 활용하세요. 각 방법은 다양한 상황에서 유용하게 적용될 수 있습니다.