[Vue] 싱글 파일 컴포넌트(SFC)

React, Vue, Angular와 같은 프론트엔드 프레임워크는 컴포넌트 기반의 개발을 지향한다. 각각의 기능을 세분화하여 하나의 파일에서 구현한다. 이렇게되면 재사용, 유지보수가 용이해진다는 장점이 있다. 

 

자바스크립트 기반으로 복잡한 프로젝트를 작성한다면 많은 어려움이 존재한다. 다음은 공식문서에 나와있는 내용이다.

1. 모든 구성요소에 대해 각각 다른 고유한 이름을 지정해야하는 어려움이 있다.

2. 문자열 템플릿을 사용하면서 HTML에 보기 안좋은 슬래시가 많이 생긴다.

3. HTML과 JS가 컴포넌트로 모듈화되어 있지만 CSS가 빠져있다.

4. 빌드단계가 없어 ES5로 제한된다.

 

이를 해결하기위해 Vue.js는 Webpack 또는 Browserify와 같은 빌드 도구를 활용하여 .vue 확장자를 가진 싱글 파일 컴포넌트를 사용한다.

---

다음은 Hello.vue를 통해 .vue가 어떻게 구성되어있는지 알아보자.

.vue는 template-script-style로 크게 세 가지로 나누어져있다. 각각은 HTML-JS-CSS를 의미한다. 

<template>
</template>

<script>
  export default {

  }
</script>

<style>
</style>

 

template

독립적인 컴포넌트의 화면에 출력될수 있도록 HTML 태그를 활용하여 작성한다. 이때 template안에 <div>와 같은 태그로 감싸고 그 안에 태그들을 작성하여 구조를 잡는다. 그리고 컴포넌트 내에서 사용되는 데이터를 템플릿 문법으로 사용할 수 있으며 바인딩과 이벤트도 사용할 수 있다.

 

script

Vue 인스턴스를 생성한 것처럼 name, data, methods 등을 export default 에 작성한다. 이때 다른 .vue도 불러와서 components 속성에 추가할 수 있다. 위와 같은 구조에서 가장 중요한 것은 data를 Object 형태로 작성하는 것이 아니라 함수 형태로 작성해야된다는 것이다. 왜냐하면 데이터(상태)를 독립적인 상태로 만들어 다른 컴포넌트에서 직접 참조할 수 없도록 해야하기 때문이다. 데이터를 공유하기위해서는 부모-자식 관계에서 자식 컴포넌트에 props 속성으로 데이터를 받아올 수 있다.

 

style

해당 컴포넌트에만 제한된 CSS를 구현할 수 있다. <style>에 scoped 속성을 추가하면 현재 컴포넌트에만 효과가 있도록 설정할 수 있다.

---

Vue에서 뿐만 아니라 바닐라 자바스크립트로 어떠한 프로젝트를 개발할 때 컴포넌트 기반으로 구조를 잡을 수 있도록 공부를 해봐야겠다.