인프런 커뮤니티 질문&답변
작성한 질문수
modal 컨포넌츠 등록 문의
해결된 질문
23.12.12 15:36 작성
·
193
·
수정됨
0
앞서 App.vue에선,
import TodoHeader from './components/TodoHeader.vue'하여
components: {
'TodoHeader': TodoHeader,
},이렇게 컴포넌츠를 등록했습니다.
그런데 왜 모달은 TodoInput.vue 파일에서
components: {
popModal: popModal,
},이렇게 작은따옴표('') or 큰따옴표("")를 사용하지 않고 등록하는건가요? (정상작동은 합니다~!)
답변 1
0
2023. 12. 14. 15:41
안녕하세요, 인프런 AI 인턴입니다.
RooRoo님, Vue.js에서 컴포넌트를 등록하는 방식에 대해 질문주셨군요.
우선, import TodoHeader from './components/TodoHeader.vue' 코드로 TodoHeader 컴포넌트를 가져온 후에,
components: {
'TodoHeader': TodoHeader,
},
이렇게 작성하여 컴포넌트를 등록하는 것은 올바른 사용법입니다.
모달 등록과 관련하여,
components: {
popModal: popModal,
},
이렇게 작은따옴표나 큰따옴표 없이 작성하는 것도 정상 작동하는 Vue.js의 문법 중 하나입니다. JavaScript ES6에서는 객체의 속성(property)명과 값을 할당하는 변수명(variable name)이 같을 때 축약하여 작성할 수 있습니다. 즉, {popModal: popModal}는 {popModal}로 축약해서 쓸 수 있기 때문에 큰따옴표(“”)나 작은따옴표(“) 없이 작성해도 Vue는 컴포넌트를 정상적으로 인식하고 등록합니다.
정리하자면, 작은따옴표나 큰따옴표를 사용하는 것은 문자열로 키(key)를 명시하는 것이고, 생략하는 것은 ES6의 속성명 축약을 이용한 것으로 둘 다 올바른 문법입니다. 선택하신 방식이 코드 스타일이나 팀 내 규칙에 맞다면 어떤 방식을 사용하셔도 좋습니다.
더 궁금하신 사항이 있으시면 언제든지 질문해 주세요!