Vue.js로 웹페이지 타이틀 동적으로 변경하는 방법

 

Vue.js로 웹페이지 타이틀 동적으로 변경하는 방법

Vue.js는 SPA(Single Page Application)를 구현하는 데 매우 효과적인 JavaScript 프레임워크입니다. Vue.js를 사용하여 동적으로 웹페이지의 제목을 변경하는 방법은 간단합니다. 이를 위해서는 Vue.js에서 제공하는 라이브러리인 Vue-Router를 이용하여 현재 라우터에 대한 정보를 가져온 다음, 페이지 타이틀을 동적으로 변경하는 방법을 사용하면 됩니다.

1. Vue-Router 설치 및 설정
우선, Vue.js 프로젝트에서 Vue-Router를 설치하고, 라우터를 설정해야 합니다. 이를 위해 vue-router 패키지를 설치하고, src/router/index.js 파일에 다음과 같이 라우터를 설정합니다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

위 코드에서 routes 배열에는 각 라우트의 경로(path), 이름(name) 및 해당 컴포넌트(component)가 포함됩니다. 이제 이 라우터를 사용하여 현재 라우트 정보를 가져와 페이지 타이틀을 동적으로 변경할 수 있습니다.

2. 현재 라우트 정보 가져오기
먼저, Vue.js에서는 created() 라이프사이클 훅을 사용하여 페이지가 생성될 때 실행되는 코드를 작성할 수 있습니다. 이 메소드에서는 현재 라우트 정보를 가져올 수 있습니다. created() 메소드는 각 Vue.js 컴포넌트에서 사용할 수 있으므로, 페이지별로 다른 타이틀을 설정할 수 있습니다.

<script>
export default {
  name: 'MyPage',
  created() {
    document.title = this.$route.name // 현재 라우트 이름으로 페이지 타이틀을 설정합니다.
  }
}
</script>

위 코드에서 created() 메소드 내부에서 document.title 속성을 사용하여 페이지의 타이틀을 설정할 수 있습니다. this.$route.name은 현재 라우트의 이름을 나타냅니다.

3. 계산된 속성을 이용하여 타이틀 설정
이 방법은 라우트의 이름으로 페이지 타이틀을 설정하는 것이므로, 각 라우트에서 이름을 지정해 주어야 합니다. 만약 다른 정보를 이용하여 페이지 타이틀을 동적으로 설정하려면, 컴포넌트 내부에서 계산된 속성을 이용하여 페이지 타이틀을 설정할 수 있습니다. 이 방법은 템플릿에서 변수를 사용하듯이 컴포넌트의 데이터를 이용하여 계산된 속성을 생성합니다. 계산된 속성은 해당 속성이 필요한 경우에만 계산되므로, 성능에도 이점이 있습니다.

<script>
export default {
  name: 'MyPage',
  data() {
    return {
      someInfo: 'Some Information',
      anotherInfo: 'Another Information'
    }
  },
  computed: {
    pageTitle() {
      return `${this.someInfo} - ${this.anotherInfo}` // 타이틀을 계산하여 반환합니다.
    }
  },
  created() {
    document.title = this.pageTitle // 계산된 속성으로 페이지 타이틀을 설정합니다.
  }
}
</script>

위 코드에서 computed 속성을 사용하여 pageTitle을 계산합니다. 이 속성은 someInfo와 anotherInfo 데이터를 조합하여 계산됩니다. created() 메소드에서는 this.pageTitle을 사용하여 페이지 타이틀을 설정합니다.

4. 모든 페이지에서 사용할 수 있는 믹스인 생성
모든 페이지에서 타이틀을 동적으로 변경하려면, 모든 컴포넌트에 created() 메소드를 추가해야 하는 번거로움이 있습니다. 이를 해결하기 위해서는 믹스인(Mixin)을 사용하면 됩니다.

const setTitleMixin = {
  created() {
    document.title = this.pageTitle
  },
  computed: {
    pageTitle() {
      return 'Default Title'
    }
  }
}

위 코드에서 setTitleMixin은 created() 메소드와 pageTitle 계산된 속성을 가지고 있습니다. 모든 페이지에서 이 믹스인을 사용하여 타이틀을 동적으로 변경할 수 있습니다.

<script>
import { setTitleMixin } from '../mixins'

export default {
  name: 'MyPage',
  mixins: [setTitleMixin],
  computed: {
    pageTitle() {
      return `${this.someInfo} - ${this.anotherInfo}` // 타이틀을 계산하여 반환합니다.
    }
  },
  data() {
    return {
      someInfo: 'Some Information',
      anotherInfo: 'Another Information'
    }
  }
}
</script>

위 코드에서 mixins 속성을 사용하여 setTitleMixin을 추가합니다. pageTitle 계산된 속성을 컴포넌트 내부에서 정의하여 믹스인에 정의된 기본값 대신 사용할 수 있습니다.

5. 결론
Vue.js를 사용하여 웹페이지의 제목을 동적으로 변경하는 방법은 여러 가지가 있습니다. 가장 간단한 방법은 created() 메소드에서 document.title을 직접 설정하는 것입니다. 또한, 계산된 속성을 사용하여 페이지 타이틀을 동적으로 변경할 수 있으며, 믹스인을 사용하여 모든 페이지에서 일관된 방법으로 타이틀을 변경할 수 있습니다.

Vue.js는 가볍고 강력한 프레임워크로, 개발자들은 다양한 방법으로 웹페이지를 제작할 수 있습니다. 타이틀 변경 기능은 간단하지만 매우 중요합니다. 올바른 방법으로 타이틀을 설정하면 검색 엔진 최적화(SEO) 및 사용자 경험(UX)을 향상시킬 수 있습니다. 이번 글을 통해 Vue.js를 사용하여 웹페이지 타이틀을 동적으로 변경하는 방법을 배웠습니다.