[TIL] Day-34

yoon Y·2021년 9월 29일

computed data methods vue watch 라이프 사이클 애플리케이션/컴포넌트 인스턴스 템플릿 문법

데브코스 - TIL

목록 보기

17/19

처음으로 vue를 배웠다. 바닐라 js를 공부하면서 빨리 프레임워크를 배우고 싶었기 때문에 어려웠지만 재미있었다.
확실히 바닐라js보다 훨씬 편리한 것 같다. 빨리 익혀서 프로젝트도 해보고 싶다.
하지만 전부 처음 배우는 개념들이어서 이해하는데 시간이 많이 걸렸고, 아직 확실히 이해가 가진 않는다.
오늘 배운 내용을 전체적으로 간략하게 적으면서 큰 흐름을 정리해보려고 한다.

애플리케이션 / 컴포넌트 인스턴스

Vue 전역객체의 createApp함수를 실행해서 새로운 어플리케이션 인스턴스를 (app)반환받는다.
createApp함수에는 인자로 객체(컴포넌트)가 들어가는데, 여러 메소드와 프로퍼티들이 옵션으로 선언되어있다.
옵션 종류
mount함수를 이용하여 원하는 dom요소의 선택자를 인자로 넣어 app과 연결한다. 이때 반환되는 값은 컴포넌트 인스턴스로 viewModel(=vm)이라고 부른다.

const RootComponent = { /* options */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

<body>
// 옵션 객체에 정의한 데이터와 메소드를 연결된 태그 안에서 사용할 수 있다
    <div id="app">
      <h1>{{ msg }}</h1>
    </div>

    <script>
      const Component = {
        data() {
          return {
            msg: 'Hello vue',
          };
        },
      };
      const vm = Vue.createApp(Component).mount('#app');
    </script>
</body>

템플릿 문법

컨텐츠를 넣을 때에는 {{}}이중 중괄호

<span>메시지: {{ msg }}</span>

속성 값을 설정할 때(값)에는 v-bind사용

<a v-bind:href="url"> ... </a>

<!-- 약어 -->
<a :href="url"> ... </a>

<!-- 동적 전달인자와 함께 쓴 약어 -->
<a :[key]="url"> ... </a>

이벤트 연결할 때(함수)는 v-on 사용

<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->
<a @click="doSomething"> ... </a>

<!-- 동적 전달인자와 함께 쓴 약어 -->
<a @[event]="doSomething"> ... </a>

옵션들

라이프 사이클

라이프 사이클의 종류

컴포넌트 인스턴스 생성 과정
데이터가 변화해 화면이 바뀌는 과정
app인스턴스가 dom과 연결이 끊기는 과정

이 과정들에서 라이프사이클 훅이라는 함수들을 실행해 사용자가 특정 단계에서 로직을 추가할 수 있다.

Data

사용할 데이터를 객체로 정의하고 그걸 반환하는 함수옵션이다.
생성된 인스턴스들이 각각 다른 데이터 객체를 가져야 하기 때문에 반드시 return해줘야 한다.
반응형 데이터를 정의할 때 미리 데이터 옵션에 선언하지 않으면,
반응성을 가지지 않게된다.

Methods

데이터를 조작할 로직이 담긴 함수들을 정의하는 객체 옵션이다.
data함수의 데이터를 쓰려면 this키워드를 사용한다.
→ 생성되는 컴포넌트 인스턴스를 참조하기 위해
method를 정의할 때는 화살표 함수를 사용하면 안된다.
→ 해당 컴포넌트 인스턴스에 바인딩되지 않음

Compute

데이터를 조작할 로직이 담긴 함수들을 정의하는 객체 옵션이다.
computed옵션 사용 시 캐싱이라는 기능이 있어
한번 계산된 값을 반복해서 쓸 때 이미 계산된 값으로 사용한다.
(연산을 낭비하지 않음)
표현식, 함수 사용 시 로직이 반복해서 실행된다.
로직이 복잡하거나 재사용 빈도가 높을 때 사용한다.

Watch

반응형 데이터가 바뀔 때 실행할 로직이 담긴 함수들을 적는 객체 옵션이다.
감시하려는 데이터를 함수 이름으로 써서 그 데이터가 변경됐을 때 실행할 로직을 함수 안에 적어주면 된다.
newValue, oldValue 2개의 인수를 받는다.
깊은 감시를 하는 deep이나 바로 실행하는 immediate옵션을 쓰려면 객체 형태의 패턴으로 바꾸어 handler함수와 옵션을 적어 사용해야한다.

vue3 공식 웹