원쌤의 Vue.js 퀵스타트 책을 보았다(Vue3)_7

이 글은 주 단위로 하던 스터디 를 개인적으로 정리하는 글입니다.

9장

Composition API 에 대해서 설명하는것으로 시작한다.

기존에는 options API 형식으로 사용하던걸 Vue3버전에서 부터 Composition API 방식으로 변경하여 적용이 가능하다.

Composition API 를 사용할때의 장점은 구분이 명확하게 이뤄질 수 있다는 점이다.(data, method, onMounted 등등을 사용할 때 조금 더 직관적임.)

ref와 reactive를 사용한 state관리에 대해서 말한다.

ref를 사용하는경우 state에 직접 접근하지 못하고 .value를 호출하여 값을 가져와야한다.

Vue에서는 상태변화를 감지하기 위해 프록시 형태로 감싸게되는데 이 부분때문인듯 하다.

Composition API에서도 computed() 를 동일하게 사용 할 수 있지만 ref를 사용하여 변수에 접근 할테니 사용에 유의하라고 되어있다.

watch..

해당기능을 동일하게 제공하지만 사용하는 방식이 조금 다르기 때문에 주의해야한다.

watch(data, (current, old) ⇒ {
	//current 변경된 값
	//old 변경되기 전 값
	//처리하려는 연산로직 영역

})

watch 내부에서 사용하는 current, old의 경우 ref로 감싸진 객체가 아니라 .value에 해당하는 value값이 전달된다. 사용에 주의가 필요하다.

export default {
	name:'',
	const x = ref(0);
	const result = ref(0);
	watch(x, (current, old) => {
		result.value = current * 2;
	})
	return {x, result}
}

물론 여러개의 데이터를 넣어 감시(watch) 할 수도 있다.

reactive를 사용하는경우에는 조심해야한다.

state.x로 바로 접근하면 안되고 getter를 통한 호출을 해야한다.

불가능한 코드

<script>
import { reactive, watch } from 'vue';

export default {
    name:"Calc6",
    setup () {
        const state = reactive({ x:0, result:0 });
        watch(state.x, (current, old)=>{
            console.log(`${old} -> ${current}`);
            state.result = current * 2;
        })
        return { state }
    }
}
</script>

getter로 명명한 임시함수를 호출(정상동작)

<script>
import { reactive, watch } from 'vue';

export default {
    name:"Calc6",
    setup () {
        const state = reactive({ x:0, result:0 });
        watch(()=>state.x, (current, old)=>{
            console.log(`${old} -> ${current}`);
            state.result = current * 2;
        })
        return { state }
    }
}
</script>

 

watchEffect는 Vue 3에서 반응성 데이터 의존성을 추적하는 기능을 제공하는 새로운 방법이다.

차이점은 다음과 같다고 한다.(누가 정리해둔거 가져옴 )

구분 watch watchEffect

감시대상(의존성 지정)	필요함. 지정된 감시 대상 데이터가 변경되면 핸들러 함수가 실행됨	불필요함. 핸들러 함수 내부에서 이용하는 반응성 데이터가 변경되면 함수가 실행됨.
변경전 값	이용가능, 두번째 인자값을 이용하여 알 수 있음.	이용불가, 받는 인자값이 없음.
감시자 설정 후 즉시실행 여부	즉시 실행X	즉시 실행

watchEffect 사용형식

watchEffect( () => {
	//반응성 데이터를 사용하는 코드
})

예시코드

export default {
	name:'',
	const x = ref(10);
	const y = ref(20);
	const result = ref(0);

	watchEffect( () => {
		result.value = x.value + y.value;
	})
	return {x, y, result}
}

차이점을 보자면 ref의 value값으로 직접 접근하여 변경한다. 그리고 즉시 실행된다.

그리고 감시 대상이 없기때문에 해당 컴포넌트 내부에 모든 반응형 데이터가 변경될때 동작한다.

(불필요한 동작이 있을 수 있음.)

그리고 watchEffect의 경우에는 감시를 해제 할 수 있다. (1회성으로도 가능)

사용방법은 watch와 watchEffect를 명명후 return받는 값을 재실행하면 된다.

handler = watchEffect( () => { ...내부로직 수행 })
#return 받은거 수행시 감시자 해제됨.
handler()

• 생명주기

 

책에서는 이하 코드들을 Composition API를 사용하는 형태로 변경하고있었다.

그리고 script setup에 대한 설명을 수행한다.

script setup의 장점

보다 간결하게 코드를 작성 할 수 있다.

순수 타입스크립트 언어를 사용해 props 등을 선언하여 사용 할 수 있다.

런타임 성능이 더 좋다.

그리고 기존 setup을 사용하는 경우 해당 영역내부에 composition api를 호출해야 했지만 그 부분들이 밖으로 나온다..!

emit(이벤트)를 발신하거나 props를 선언할때도 편하게 가능하다.

//기존방식
setup(props, context){
	context.emit('add-todo', todo)
}

// script setup 방식
const props = defineProps({
	todoItem : { type: Object, required: true}
})

const emit = defineEmits(['delete-todo', 'toggle-compalted'])
emit('delete-todo', id)

각각 props, emit에 대한 영역 구분이 명확하게 된다.

책에서는 composition API를 반드시 사용 할 필요는 없지만 기존에 사용하던 options API보다 장점이 많기에 권장한다고 한다. (특히 새롭게 개발하는 application이라면 더)

대신 반응성 데이터를 사용 할 때 주의해야 하는 부분들에 신경써야한다.(ref, reactive)

 

그 이후 내용들에 대해서..

10장 vue-router를 이용한 라우팅

11장 axios를 이용한 HTTP 통신

12장 vue-router와 axios를 사용한 예제

13장  pinia를 이용한 상태 관리

위 내용들은 대부분 실질적인 프로젝트를 세팅하면서 건드린 부분들이 더 많아서 따로 정리하진 않았다.

13장의 경우 Vuex와 Pinia의 차이점에 대해서 정리해둔 블로그 글이 많기에 그쪽을 살펴보면 될 것 같고,

11장과 12장의 경우

널리 알려진 ajax와 같이 비동기 통신을 하는점은 동일하다. 대신 axios의 경우 편의성 기능이나 timeout에 대한 설정 및 json 형태로의 변환을 지원하는 등등 여러가지에 대해 개선점이 있다.

안드로이드 개발자들도 비동기 통신을 할때 axios 모듈을 사용해서 하는 것 같았다.

react를 할때도 주로 썼었던 부분들도 있어서 비교 글에 대해서 한번 찾아보면 좋을 것 같다.

ajax axios fetch 3개!

 

해당 책 스터디 글은 여기서 종-료 합니다~