[Vue] Comoponent 내 상수 관리

Component 내에 전반적으로 사용될 상수를 어떻게 선언해서 사용해야 할까?

해당 상수를 Component 상수라고 칭하겠다.

현재 프로젝트에서는 다음의 방법을 쓰고 있다.

data() {
	// 상수
	this.name = "Half"

	return {}
}

data 속성에 return value로 넣지 않고 vue instnace에 바로 할당하는 방법이다.

이렇게 하면 vue data 선언 영역에서 어떤 데이터가 상수로 사용하는지 알 수 있다.

하지만 여기에는 2가지 문제점이 있다.

---

문제점

1. 해당 데이터가 상수인지는 data 선언 영역에서만 확인이 가능
2. 상수를 보장할 수 없음

---

methods: {
	someFn() {
		const result = `hi ${this.name}`
		...
	}
}

해당 코드에서 this.name만으로 유추할 수 있는 사실은 vue instnace의 속성이라는 사실밖에 없다.

사실은 Component 상수 인데도 말이다.

그럼 어떻게 해야 위 2가지 문제점을 해결할 수 있을까? 바로 다음과 같다

<script>
// Capital-Snake-Case
const NAME="Half"
const FULL_NAME="Road"
...
methods: {
	someFn() {
		const result = `hi ${NAME}`
		...
	}
}
...

대문자 + Underbar 표기법(Capital-Snake-Case)으로 작성을 하면 용도를 뚜렷하게 알 수 있다.

NAME만 보고도 상수인 것을 알며 const로 선언하였으니 당연히 상수를 강제할 수 있다.

Local 상수는 일반적인 camel-case를 사용하니, Component 상수인 것도 알 수 있다.

이렇게 표기법을 통해 Naming에 많은 정보를 내포하면 코드 유지 관리에 이점이 있다.

그렇다면 Template에서 사용을 해야 한다면 어떻게 해야 할까?

다음과 같다.

const NAME = "Half"
...
data() {
	this.NAME = NAME
	...
}

return value로 작성하지 않은 이유는 Reactive Data가 아니기 때문이다.(상수임을 명심하자)

이런 식으로 작성하면 Vue 성능에도 미미하지만 이점이 있을 것이다.

(Vue 내부에서 Reactive Data 처리를 별도로 하고 있으니...)

 

이상으로 Component 상수를 관리하는 방법을 알아보았다.

더 좋은 방법이 있으면 댓글로 공유해주시길 바란다.