3. [vue3-project] 컴포넌트와 프래그먼트

 

 

안녕하세요~!!!

오늘은 vue.js3의 폴더 구조에 대해 알아보려고 합니다!!

 

저는 코지코더님의 무료강의로 공부하며 정리 중입니다!!

https://www.youtube.com/@kossiecoder

 

오늘은 뷰 컴포넌트와 프래그먼트에 대해 알아보도록 하겠습니다!!

 

 

---

 

 

1. 뷰 컴포넌트

 

 

뷰 컴포넌트는 (하나의 부품) 여러 곳에 가져다 사용할 수 있습니다.

컴포넌트 파일을 만들때에는 확장자가 vue로 들어갑니다.

그래서!!

컴포넌트 파일 생성 시 컴포넌트명.vue 로 만들어주면 됩니다.

 

뷰 컴포넌트는 세 부분으로 나눠지는데요!

                                                                   1)<template>  ->  html 코드가 들어감

                                                                   2)<script>       ->  자바스크립트가 들어감

                                                                   3)<style>        ->   css 코드가 들어감

 

스크립트와 스타일을 활용하여 코드를 작성해보도록 하겠습니다^^

 

 

 

<script>를 사용할때에 export default { } 안에 코드를 작성해 주면 됩니다.

setup() 함수를 사용하여 객체를 선언하고,

반환된 객체를 인스턴스에서 사용할 수 있습니다.

const name = 'Kossie coder!'; 로 객체 선언 후

return 값으로 name을 주었습니다.

 

vue가이드 문서에 setup() 함수 설명이 나와있으니 확인해 보세요><

setup() 함수

Composition API | Vue.js

 

 

이제 name의 값을 template에 접근시킬 때에는

{{ }} 두 개 중괄호 안에 변환된 객체 명(name)을 적어주면

<div>'Kossie coder!'</div> 이렇게 들어가게 됩니다.

 

스타일 적용을 하기 위해 div에 class="name"을 주고

<style> 태그에 name 클래스로 color : red를 주어

Kossie coder!  빨간색글자로 스타일까지 모두 주었습니다.

---

결과화면

 

 

 

 

 

2. 프래그먼트

 

 

 

기존 vue.js2에서는 다중 루트노드를 지원하지 않았기 때문에 

 

 

기존 vue.js2 단일 루트 노드 사용 예시

 

 

사진과 같이 다중노드를 하나의 <div>로 다시 한번 감싸줘야만 했습니다!

그렇지 않으면 오류가 떴다고..!!!

 

 

그러나 vue.js3로 넘어오면서 이 다중루트 노드를 지원하게 되어

겉에 <div>로 한번 더 감싸지 않더라도 작동이 된답니다 ㅎㅎ

 

 

vue.js3 다중 루트 노드 사용 예시

 

 

 

자세한 설명은 vue가이드 문서에도 잘 나와있으니 한번 참고해 보세요!!

 

프래그먼트 설명

Fragments | Vue.js

 

---

다중루트노드 결과화면

 

 

오류 없이 잘 작동하는 것을 모두 확인하였습니다!!!

 

---

 

 

오늘은 코지코더님의 vue.js3의 컴포넌트와 프래그먼트에 대해 정리해 보았습니다 ㅎㅎㅎ

이번 부분에서는 vue.js2와의 차이점들을 알 수 있었던 유익한 시간이었네요!

좋은 정보가 있으면 공유해요~~~

감사합니다:)