1. Vue.js의 정의와 구조파악
Vue.js란 웹 사용자 인터페이스를 만들기 위한 쉽고 강력하며 다재다능한 프레임워크
SPA 구조 : 하나의 페이지에서 유저가 원하는 정보만 보여주는 방식, 페이지를 구성하는 HTML파일이 하나만 있다는 것을 의미
SFC 구조 : Vue.js 파일의 확장명은 .vue 이다 이 안에서 HTML, CSS, JS가 관리된다. 하나의 컴포넌트에서 이 모든게 관리가 된다고 하여 Single File Component라고 부른다.
2. Vue.js 개발스타일
Options API : data, method 그리고 mounted 같은 객체를 활용하여 컴포넌트 로직을 정의하는 개발 스타일, 옵션으로 정의된 속성은 컴포넌트 인스천스를 가리키는 함수 내부의 this에 노출된다.
Composition API : import키워드를 통해서 가져온 Vue.js 내장 함수 혹은 속성들을 사용하여 컴포넌트 로직을 정의하는 스타일 SFC에서 컴포지션 API는 일반적으로 <script setup> 처럼 사용한다.
두 가지 개발스타일 중에서 한 가지를 선택할 수 있다. 뭐가 좋고 나쁘다는 없다.
3. 라이프사이클 LifeCycle
인스턴스란 객체 지향 프로그래밍에서 class에 소속된 개별적인 객체를 말한다.
라이프사이클 이미지
created
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
data(){
return {
count: 0,
}
},
beforeCreate() {
console.log('라이프사이클이 만들어지기 전', this.count)
},
created() {
console.log('라이프사이클이 만들어 졌다', this.count)
},
}
</script>
<style lang="scss" scoped>
</style>
콘솔
라이프사이클이 만들어지기 전 undefined
라이프사이클이 만들어 졌다 0
mounted
<template>
<div>{{ count }}</div>
<h1>라이프사이클 테스트</h1>
</template>
<script>
export default {
data(){
return {
count: 0,
}
},
beforeCreate() {
console.log('라이프사이클이 만들어지기 전', this.count)
},
created() {
console.log('라이프사이클이 만들어 졌다', this.count)
},
beforeMount(){
console.log('라이프사이클이 마운트되기 전', document.querySelector('h1'))
},
mounted(){
console.log('라이프사이클이 마운트되었다', document.querySelector('h1'))
},
}
</script>
<style lang="scss" scoped>
</style>
라이프사이클이 마운트되기 전 null
라이프사이클이 마운트되었다 <h1>라이프사이클 테스트</h1>
UI가 렌더링된 직후의 로직을 짤 때는 mounted를 쓰고, 전에 로직을 짤 때는 beforeMounted를 쓰면 된다.
method
<template>
<div>{{ count }}</div>
<h1>라이프사이클 테스트</h1>
</template>
<script>
export default {
data(){
return {
count: 0,
}
},
beforeCreate() {
console.log('라이프사이클이 만들어지기 전', this.count)
this.test()
},
created() {
console.log('라이프사이클이 만들어 졌다', this.count)
this.test()
},
// beforeMount(){
// console.log('라이프사이클이 마운트되기 전', document.querySelector('h1'))
// },
// mounted(){
// console.log('라이프사이클이 마운트되었다', document.querySelector('h1'))
// },
methods: {
test() {
console.log('함수 호출')
}
}
}
</script>
<style lang="scss" scoped>
</style>
라이프사이클이 만들어지기 전 undefined
main.js:5 [Vue warn]: Unhandled error during execution of beforeCreate hook
at <App>
beforeCreate라이프사이클 훅이 동작할 시점에 컴포넌트가 생성되지 않았기 때문에 methods 부분에 작성한 코드와 별개로, 관련된 그 어떤 것도 생성되지 않았기 때문에 접근이 불가
<template>
<div>{{ count }}</div>
<h1>라이프사이클 테스트</h1>
</template>
<script>
export default {
data(){
return {
count: 0,
}
},
beforeCreate() {
console.log('라이프사이클이 만들어지기 전', this.count)
},
created() {
console.log('라이프사이클이 만들어 졌다', this.count)
this.test()
},
// beforeMount(){
// console.log('라이프사이클이 마운트되기 전', document.querySelector('h1'))
// },
// mounted(){
// console.log('라이프사이클이 마운트되었다', document.querySelector('h1'))
// },
methods: {
test() {
console.log('함수 호출')
}
},
}
</script>
<style lang="scss" scoped>
</style>
라이프사이클이 만들어지기 전 undefined
라이프사이클이 만들어 졌다 0
함수 호출
this.test라는 함수가 잘 호출되었다
라이프사이클 훅을 많이 사용하지 않을 수 있다. 어떤 시점에 어떤 기능을 위해 사용해야하는지 생각해 사용하기 위해서 알아야할 기본적인 개념은 확립해야 한다.