[VUE3.JS] SFC 구조에 대해서 알아보자

베하~ 뉴진쓰 팀의 큰뉴진입니다~~!

저는 올해 초에 맛보기 느낌으로 리액트에 대해서 다뤄봤었는데요,

VUE 프레임워크가 러닝 커브도 적고 기능 구현하기 좋다고 들어서 한번 체험해봤어요!

아무래도 VUE2가 아직도 많이 쓰이다 보니 VUE3는 공식 문서를 제외하곤 아직 정보가 부족한 것 같아요 ㅠㅠ

간단한 예제를 다루면서 SFC에 대해서 설명해드릴게요.

---

SFC란?

single file Component(싱글 파일 컴포넌트)의 약자로  하나의 *.vue 파일에서 컴포넌트의 템플릿, 로직 및 스타일을 모두 작성할 수 있는 구조입니다.

<template>
/*
HTML를 작성합니다.
-> vue 내부 컴포넌트, import한 컴포넌트를 불러올 수 있습니다.
[ex) <div v-if="ifnow"/>, <scriptComponent/> ]
-> <script>에서 작성한 변수, 함수를 사용하거나 하위 컴포넌트를 호출 할 수 있습니다.
*/
</template>

<script> or <script setup>
/*
컴포넌트에 필요한 변수, 함수를 선언합니다.
*/
</script>

<style>
/*
<template> 에서 작성한 태그에 [ex)<div></div>] 
.div{
속성, 위치, 색상 등 
}을 작성해서 스타일을 입힙니다.

class명을 부여해서[ex) <div class="newjinx"></div>] 
.newjinx { }로 스타일을 입힐 수 있습니다.
*/
</style>

VUE는 javascript 기반으로 동작하기 때문에 HTML 작성에 기본 지식이 있다면

SFC 구조도 쉽고 빠르게 입문할 수 있어요.

 

조금 헷갈릴 수도 있는 부분이 바로 <script>인데요,

왜 2가지를 표현했냐면 setup에 따라서 구조가 확연히 달라지기 때문이에요.

아래 script 코드는 같은 기능을 하고 있어요.

<script>
import { ref } from 'vue'; /* 사용할 컴포넌트를 import해서 불러온다. */

export default { /* 객체를 return하려면 선언이 필요 > 하나의 파일에는 하나의 export default가 존재 */ 
  name: 'MyComponent', /* 컴포넌트 이름을 정의 */
  setup() { /* setup 함수 내부에서 Composition API를 사용하여 컴포넌트 로직을 구성 */
    const message = ref('Hello, Vue3!'); /*ref로 message를 선언하면 message를 호출시 Hello, Vue3!값을 참조할 수 있다.*/

    return {
      message /* 외부에서 호출하려면 반드시 return에 명시해야한다. */
    };
  }
};
</script>


-------------------------------------------


<script setup> /* script 태그를 사용할 때 setup을 미리 선언한다*/
import { ref } from 'vue';

/* 컴포넌트 이름을 자동으로 추론한다 */
const message = ref('Hello, Vue3!'); /* 선언한 변수, 함수는 언제든지 template에서 호출할 수 있다. > export default가 필요없다.*/

</script>

둘다 쓰기 나름이지만 SFC에서는 <script setup>을 쓰는 것을 권장하고 있어요.

 

SFC 구조의 장점

• 친숙한 HTML, CSS 및 JavaScript 문법을 사용하여 모듈화된 컴포넌트 작성
• 본질적으로 사용 목적에 따라 구성됨
• 런타임 컴파일 비용이 없는 사전 컴파일된 템플릿
• 컴포넌트 범위 CSS > 별도의 CSS파일이 필요없다.
• 컴포지션 API로 작업할 때 더욱 인체공학적인 문법
• 템플릿과 스크립트를 교차 분석하여 컴파일 시간을 더욱 더최적화
• 템플릿 표현식을 지원하는 IDE의 자동 완성 및 유형 검사
• 즉시 사용 가능한 핫 모듈 교체(Hot-Module Replacement: HMR) 지원

 

SFC에 특화된 환경

• 싱글 페이지 앱(Single Page Application: SPA)
• 정적 사이트 생성(Static-Site Generator: SSG)
• 더 나은 개발 경험(DX)을 위해 프론트엔드 개발 방식에 합리적으로 빌드 방식 도입.

---

<script>만 떼고 본다면 익숙한 html, css코드를 그대로 적용할 수 있도록 구성되어 있어요.

vue 내장 컴포넌트는 어떤게 있는지? 또 어떤식으로 활용할 수 있는지는

다음번에 다뤄보도록 할게요~

이상으로 뉴진쓰의 큰뉴진이었습니다!