modal 컨포넌츠 등록 문의

안녕하세요, 인프런 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의 속성명 축약을 이용한 것으로 둘 다 올바른 문법입니다. 선택하신 방식이 코드 스타일이나 팀 내 규칙에 맞다면 어떤 방식을 사용하셔도 좋습니다.

더 궁금하신 사항이 있으시면 언제든지 질문해 주세요!