[Vue.js] 템플릿에서 변수 선언 및 흐름 제어 불가능: 왜 그럴까요?

 

Vue.js 템플릿은 HTML 기반으로 데이터를 표시하고 컴포넌트와 상호 작용하는 데 사용됩니다. 하지만, 템플릿 내에서 변수 선언이나 흐름 제어와 같은 JavaScript 코드를 직접 작성하는 것은 허용되지 않습니다.

이유는 다음과 같습니다:

• 템플릿의 역할: 템플릿은 데이터 표현에 초점을 맞추어야 합니다. JavaScript 코드를 직접 작성하면 템플릿이 복잡하고 읽기 어려워지고 유지 관리가 어려워집니다.
• 보안: 템플릿 내에서 사용자 입력을 직접 처리하면 XSS 공격과 같은 보안 취약점이 발생할 수 있습니다.
• 코드 재사용성: 템플릿 로직을 별도의 JavaScript 코드로 분리하면 코드 재사용성을 높일 수 있으며, 테스트와 디버깅이 용이해집니다.

변수 선언 불가능

템플릿 내에서 var, let, const 키워드를 사용하여 변수를 선언할 수 없습니다. 변수는 컴포넌트의 data() 함수 또는 computed 속성에서 정의해야 합니다. 템플릿에서는 정의된 변수에만 접근하고 사용할 수 있습니다.

예시:

HTML

{{ var a = 1 }}

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    }
  }
}
</script>

 

흐름 제어 불가능

템플릿 내에서 if, for, while과 같은 흐름 제어 구문을 사용할 수 없습니다. 조건부 표현이나 반복은 v-if, v-for 지시문을 사용해야 합니다. 삼항 표현식을 사용하여 간단한 조건부 표현을 구현할 수도 있습니다.

예시:

HTML

{{ if (ok) { return message } }}

<div v-if="ok">{{ message }}</div>

{{ ok ? message : '없습니다' }}

 

 

Vue.js 템플릿은 데이터 표현에 초점을 맞추고, JavaScript 코드는 컴포넌트의 data(), methods, computed 속성에서 분리하여 작성하는 것이 좋은 프로그래밍 방식입니다. 이렇게 하면 코드가 더욱 명확하고 유지 관리하기 쉬우며, 보안 취약점 발생 가능성을 줄일 수 있습니다.