vue 화요일

Web Development assistant·2024년 2월 13일

# Vue

목록 보기

4/4

3장 Vue.js 기초와 Template

3.1 보간법 = {{이중 괄호 태그 내 값을 의미}}
https://ko.vuejs.org/guide/essentials/template-syntax

테스트 결과 실제 공백임에도 disabled 동작됨을 확인

선언식(변수) x 표현식(표현식은 값으로 평가할 수 있어야 하는 코드 조각)의 경우 가능

3.2 기본 디렉티브 = v- 접두사가 있는 특수한 속성을 디렉티브라 한다.
https://ko.vuejs.org/api/built-in-directives.html

__3.2.1 v-text, v-html 디렉티브

v-text 사용시 태그 내부 보간법에 작성된 값이 오버라이드 된다며 경고문구

v-html 사용시 template태그로 감쌀 경우 랜더링 되지 않음.

3.2.2 v-bind 디렉티브 : 하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩
https://ko.vuejs.org/api/built-in-directives.html#v-bind

3.3 v-model 디렉티브 = 프론트엔드에서 폼을 처리할 때, 폼 입력 엘리먼트의 상태를 JavaScript의 상태와 동기화
https://ko.vuejs.org/guide/essentials/forms.html#basic-usage

3.3.1 기본 사용법
3.3.2 수식어

__3.3.3 v-model의 한글처리 문제 :
v-model은 v-bind와 v-on의 기능의 조합으로 동작,
한국어 입력을 다룰 때 v-bind:value와 v-on:input를 직접 연결해서 사용

3.4 조건 렌더링 디렉티브

3.4.1 v-show
3.4.2 v-if

v-show : 인풋 경고창 알람문구를 띄울때
v-if : 게시판 목록 조회시 값이 없을때 목록 모습 노출의 경우

__3.4.3 v-else, v-else-if 디렉티브

3.5 반복 렌더링 디렉티브
https://ko.vuejs.org/guide/essentials/list.html#v-for-with-v-if

__3.5.1 v-for 디렉티브

또는 v-for를 사용하는 대신에 computed 속성을 사용하여 필터링 된 데이터를 반환하도록 하는 것이 좋다.

__3.5.2 여러 요소를 묶어서 반복 렌더링하기 = v-for 디렉티브를 사용해라!

<MyComponent
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
/>

__3.5.3 v-for 디렉티브와 key 특성 = 리스트 아이템의 순서가 변경된 경우, 아이템의 순서와 일치하도록 DOM 엘리먼트를 이동하는 대신, 변경이 필요한 인덱스의 엘리먼트들을 제자리에서 패치해 아이템을 렌더링하도록 합니다.

즉 vue.js 템플릿 랜더링을 효율적으로 하기 위함

3.5.4 데이터 변경 시 주의사항
3.6 기타 디렉티브
3.6.1 v-pre 디렉티브
https://ko.vuejs.org/api/built-in-directives.html#v-pre

__3.6.2 v-once 디렉티브
https://ko.vuejs.org/api/built-in-directives.html#v-once

__3.6.3 v-cloak 디렉티브
https://webisfree.com/2019-02-10/%5Bvuejs%5D-v-cloak-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EA%B0%90%EC%B6%94%EA%B8%B0

3.7 동적 아규먼트(Dynamic Argument)

4장 Vue 인스턴스

4.1 Vue 인스턴스 개요
-Vue로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위

4.2 data 옵션
-Vue 인스턴스에 사용할 데이터 속성들을 정의하는 옵션.
이 속성들은 Vue 인스턴스의 상태를 나타내며, 화면에 표시되거나 조작되는 데이터를 포함.
data 옵션에 정의된 데이터는 Vue 인스턴스의 반응성 시스템에 의해 감지되어, 데이터가 변경되면 자동으로 화면이 업데이트

4.3 계산된 속성(Computed Property)
4.4 메서드(Methods)
-computed는 계산이 필요한 값을 효율적으로 관리하고, methods는 메소드를 호출할 때마다 새로운 계산이 필요한 경우에 사용.
이미 값이 있고 그걸 계산할때 computed?
새로운 값을 호출하려면 methods
methods는 필요할 때 직접 호출되는 반면, computed는 의존하는 데이터가 변경될 때 자동으로 갱신되어 사용 ex)계산서의 총 금액., 수량, 금액이 변경 되더라도 계산된 최종가격을 가져온다.
computed은 종속된 데이터가 변경될 때 자동으로 업데이트되는 계산된 속성을 정의하는 데 사용됩니다.
methods는 특정 로직을 수행하고자 할 때 호출되는 메소드를 정의하는 데 사용됩니다.

나눈 이유???
computed를 사용하면 의도를 더 명확하게 전달할 수 있습니다. 데이터의 계산된 속성이라는 명시적인 성격을 가지기 때문입니다.
computed는 데이터의 변화에 따라 자동으로 갱신되므로, 여러 곳에서 동일한 계산된 값을 사용하는 경우 코드의 중복을 피할 수 있습니다.
예를 들어, 여러 컴포넌트에서 같은 계산된 값을 사용한다면, computed에서 한 번 정의하고 여러 곳에서 활용할 수 있습니다.
computed 속성은 캐싱을 통해 최적화됩니다. 즉, 의존성이 변경되지 않으면 계산이 다시 이루어지지 않고, 기존의 캐시된 값을 사용합니다. 이는 불필요한 계산을 피하고 성능을 향상시킬 수 있습니다.
methods에서는 호출될 때마다 항상 재계산이 이루어지기 때문에, 불필요한 중복 계산이 발생할 수 있습니다.

4.5 관찰 속성

4.6 생명주기 메서드

beforeCreate()

-라이프사이클 중에서 가장 맨 처음 실행됩니다.
-이때는 아직 컴포넌트가 DOM에 추가되기 전이기 때문에 DOM에 접근을 하게 되면 에러가 발생합니다.

created()

-data() 변수와 events 메서드가 활성화되어 접근할 수 있습니다.

beforeMount()

template 태그가 실행된 후 실행됩니다.(즉, html 태그를 등록합니다.)
템플릿과 렌더 함수들이 컴파일된 후에 첫 렌더링 일어나기 직전에 실행됩니다.
만약에 초기 렌더링 직전에 DOM을 변경하고자 한다면 이 생명주기를 활용하면 됩니다.
하지만 컴포넌트 초기에 설정해야 할 데이터들은 created 단계에서 해야 합니다.

mounted()

렌더링이 완료된 이후에 실행됨으로 템플릿과 렌더링 된 DOM에 접근할 수 있는 단계입니다.

beforeUpdate()

el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 난 후에 인스턴스 속성들이 화면에 치환됩니다. 이 치환된 값을 $watch 속성으로 감시하는데요, 이러한 작업을 데이터 관찰이라고 합니다. 이렇게 관찰하고 있는 데이터들이 변경되면 가상 돔을 이용해 화면에 다시 그려야 합니다. 이 때, 그리기 직전 호출되는 단계가 beforeUpdate 입니다. 따라서 변경 예정인 데이터 값을 이용해 작업을 해야할 때 그 로직을 이 단계에서 구현하시면 됩니다. 또한 그 값을 변경하는 로직을 구현하셔도 다시 화면에 그려지지는 않습니다.

updated()

beforeUpdate 가 끝나고 화면에 다시 그리고 나면 실행되는 단계입니다. 데이터가 변경되고 화면 요소를 제어하는 것을 구현하고 싶을 때 이 단계에서 작업하시면 됩니다. 하지만 이 단계에서 그 값을 또 변경하면 무한 루프에 빠질 수 있습니다. 왜냐하면 여기서 값을 변경하면 다시 beforeUpdate -> updated (또 값 변경) -> beforeUpdate -> ... 이렇게 무한루프가 되기 때문입니다. 따라서 데이터 값을 갱신하는 로직은 beforeUpdate 에서 처리해주시길 바랍니다.

beforeDestroy()

인스턴스의 데이터를 삭제하거나 인스턴스가 사라지기 직전 해야하는 작업들을 구현

destroyed()

뷰 인스턴스가 destroy 되고 난 후 호출되는 단계입니다. 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언했던 인스턴스들 역시 모두 destroy 됩니다.

9.5 watch와 watchEffect
__9.5.1 watch : "특정 데이터"의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성
지연 호출, watch는 즉시 실행되는 게 아니라 변경이 감지된 후 이전값과 변경된 값을 같이 불러온다.

__9.5.2 watchEffect :Composition API에서만 사용이 가능(setup 훅)
watch는 이전값과 변경된 값을 알 수 있지만 watchEffect는 알 수 없다.
watch는 감시 대상을 지정해야만 하지만 watchEffect는 함수 안에서 참조되는 변수만 감시한다.

__9.5.3 감시자 설정 해제 : # https://kyounghwan01.github.io/blog/Vue/vue3/composition-api/#watch-watcheffect-%E1%84%8C%E1%85%AE%E1%86%BC%E1%84%8C%E1%85%B5

수요일 공부

5장 이벤트 처리
https://ko.vuejs.org/guide/essentials/event-handling

5.1 이벤트 개요
v-on 디렉티브 사용, 단축 문법으로는 @기호를 사용!
v-on:click="handler" 또는 줄여서 @click="handler"와 같이 사용

5.2 인라인 이벤트 처리

5.3 이벤트 핸들러 메서드

5.4 이벤트 객체
5.5 기본 이벤트
5.6 이벤트 전파와 버블링(이벤트 수식어의 stop = stopPropagation)
5.7 이벤트 수식어
https://v2.ko.vuejs.org/v2/guide/events.html#%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%88%98%EC%8B%9D%EC%96%B4
수식어 체이닝 가능, 하지만 순서 중요!