[개발자의품격][부트캠프][1기][20차시][21차시] Vue.js #8 | Lifecycle Hooks

Lifecycle Hooks 순서에 따라 뷰가 자동으로 함수들을 호출한다. 어느 시점에 어떤 데이터를 조회할 것인지 설계하느냐에 따라 체감 성능이 달라질 수 있다.

 

setup(composition api)

composition api는 Vue.js 3.0에서 밀고 있지만 아직까지는 실무에서 쓰지 않는 기능이다. data와 method를 각각 선언하는 option api 방식을 Vue.js 2.0까지 사용해 왔다. composition api는 새로운 방법으로 option api와 같은 기능을 구현한다. composition api는 각각 따로 존재하는 data와 method를 setup 안에서 관리하여 코드의 가독성을 높이고자 한다. 하지만 실무에서는 data와 method를 명확하기 구분하는 것이 익숙하고 편리하다는 입장이다.

 

화면 열릴 때 조회 수행

마운트 될 때 doSearch함수가 실행되게 한다.

mounted() {
    this.doSearch()
},

 

[그림 1] 조회 버튼 클릭 없이 조회 기능 수행

 

Garbage Collection 대상 지정

자바스크립트는 Garbage Collection으로 자동으로 메모리를 정리한다. 하지만 배열 등과 같이 heap 메모리에 올라가 있는 값은 Garbage Collection이 자동으로 정리하기 어렵다. 이런 경우 unmounted에서 null을 할당하면 언마운트할 때 Garbage Collection이 메모리에서 정리해준다.

unmounted() {
    this.drinkList = null
},

 

---

 

21차시 추가 내용

Lifecycle Hooks에서 주로 사용하는 것은 3개이다.

beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeUnmount() {},
unmounted() {}

 

Lifecycle Hooks 시점을 고려하여 사용자가 당장 사용해야 하는 기능은 created에서 가져오게 하고, 그렇지 않은 경우(순서상 뒤에 있는 경우, 서버의 데이터가 무거운 경우 등)는 mounted에서 가져오게 하면 체감 성능이 올라갈 수 있다.

<script>
export default {
  ...
  // setup() {},
  beforeCreate() {}, // created되기 직전
  created() {}, // data, props, components, watch, computed, methods 이런 모든 정보를 가지고 준비가 끝난 상태
  beforeMount() {}, // mounted되기 직전(DOM이 랜더링 되기 직전). 가상 DOM 준비 끝난 상태로 추정됨
  mounted() {}, // 실제 DOM이 랜더링이 끝난 상태
  beforeUpdate() {}, // updated되기 직전
  updated() {}, // data 변경이 일어난 경우. 화면과 연결된 경우 mounted도 함께 작동함
  beforeUnmount() {}, // unmounted 직전
  unmounted() {} // 컴포넌트를 빠져 나갈때
  // methods: {}
}
</script>

 

컴포넌트를 빠져나갈 때 unmounted 처리를 하지 않으면 불필요한 트랜잭션이 계속해서 일어날 수 있다. 이에 대한 예로 setInterval 함수를 이용해 1초마다 'aaa'가 출력되게 하였다.

...

data() {
  return {
    fnInterval: null
  }
},

...

mounted() {
  this.fnInterval = window.setInterval(() => {
    console.log('aaa')
  }, 1000)
},

 

unmounted에 clearInterval 함수를 적용해 컴포넌트를 빠져나갈 때 트랜잭션을 멈추게 하였다. 이러한 처리를 하지 않으면 컴포넌트를 빠져나가도 트랜잭션이 무한으로 일어난다.

unmounted() {
  window.clearInterval(this.fnInterval)
  this.fnInterval = null // 가비지 컬렉션 대상 처리. heap 메모리에 올라가는 데이터(객체, 배열)의 경우도 unmounted에서 null 처리해주어야 리소스를 효율적으로 쓸수 있다.
},