지난 포스팅에 이어서 뷰의 기본적인 작동방식을 알아보자.
생성한 vue 프로젝트를 시작하려면 cd 명령어를 통해 ide 터미널내에서 생성한 프로젝트로 이동한다.
그리고 아래와 같이 입력해주면,
뷰프로젝트 실행화면을 볼수 있다.
router를 기본으로 셋팅했기 때문에 기본적으로 라우팅이 들어가있는데 우선 라우팅은 무시하고 views 파일의 Home.vue로 들어가보도록 한다.
바로 보이는 위의 하면이 Home.vue의 모습이다.
vue파일의 기본 구성요소는 template과 script, 그리고 화면에선 없지만 css를 구성하는 style 파일 이렇게 3가지 이다.
template를 살펴보니 익숙한 html형식으로 구성되어있다는 것을 알수 있다.
우선 template에는 div와 같은 감싸는 태그를 꼭 넣어주어야한다는 것을 잊지말자.
< script >태그 내부를 살펴보면
import를 통해서 components 내의 HelloWorld를 가져오고 있고, export default라는 곳의 내부에서 components를선언하여 HelloWorld vue파일을 받아오고 있다.
-Vue의 컴포넌트란 무엇일까?
컴포넌트는 flutter에 비유하자면 하나의 위젯이고 실생활에 비유하자면 레고로 비추어볼 수있다. 레고는 독립적인 부품들로 성을 만들거나 자동차를 만든다. 컴포넌트는 이렇게 하나의 파일들이 모여서 앞에서 보았던 Home과 같은 웹페이지의 구성요소들을 만들 수 있는 것이다.
Vue.js에서 컴포넌트라는 것은 상당히 중요한 개념이다.
또한 위의 예제처럼 하나만 줄수 있는 것이 아니라 여러개를 불러와서 ,로 구분후에 사용이 가능하다.
이렇게 < script >태그 내부에서 불러온 컴포넌트를 < template >태그 내에서 < HelloWord >라는 불러온 태그명과 동일하게 사용이 가능한 것이다.
그러면 HelloWord 컴포넌트 파일을 살펴보자.
위처럼 많은 html태그들이 있었는데,
알아보기로한 렌더링만을 살펴보기 위하여 다지우고 data와 props를 주었다.
그럼 아까의 화면이 아래와 같은 웹뷰화면이 된다.
< p >태그 내부를 보면 script 내에서 export의 객체안에 property인 data() 함수를 통해 컴포넌트에서 필요한 data들을 준다. 그리고 template은 {{ introduce }}로 함수명을 받아오고 있다.
위와같이 data함수내에서 컴포넌트에 필요한 데이터를 적어주면 template에서 받아서 그 데이터를 사용할 수 있는 것이다.
export default {}의 프로퍼티로 들어갈 목록과 그역할을 한번 살펴보겠다.
-data
아래와 같이 뷰 컴포넌트에서 어떠한 데이터를 return하는 함수를 넣어주어야 한다. 컴포넌트 내에서 데이터를 주기 위한 방법이다.
그리고 아직 사용하지는 않았지만,
-Methods
단어 그대로 함수들을 정의하며, 정의된 함수들은 다른 methods 혹은 template에서 사용될 수있다.
-computed
methods와 유사하지만 computed에서 사용하고 있는 data에 변화가 있으면 자동으로 계산되는 함수들의 모음이다.
-watch
watch는 computed와 비슷하지만 많은 옵션이 존재한다. 데이터 변경의 응답으로 비동기식 계산이나 시간이 많이 소요되는 계산을 실행할때 watch를 사용한다.
그리고 < h1 >태그 내에서 사용하고 있는,
-props
props를 간단히 말하자면 부모컴포넌트의 데이터를 자식컴포넌트에서 받아오는 것이다.
props의 자세한 사용법은 다음포스팅에서 이어가도록 할것이다 !
