프론트엔드로 회사를 다니면서 vue.js를 접하게 됐다
react를 조금 공부했던 터라 아쉽긴 했지만 vue가 더 쉽다는 말에
공부를 시작하게 됐고, 지금은 처음보다 실력이 많이 늘은 것 같다
그래서 지금까지의 공부한 것들을 파트별로 나누어 정리해볼까 한다

파일 구조와 문법은 너무 기초라 다루지 않습니다
기초 지식이 있는 상태에서 읽어주세요

📌 vue의 라이프사이클

아무래도 제일 이해하기 힘든 부분이 vue의 라이프사이클이다

필자가 제일 이해하기 쉬웠던 표를 가져왔다
이 라이프사이클만 이해한다면 벌써 vue를 절반 이해한 것이다
그만큼 vue는 라이프사이클 때문에 이슈가 빈번하게 발생한다

여기서 자주 사용하는
setup, created, mounted, methods, computed, watch를
좀 더 친근하고 디테일하게 얘기해볼까 한다

---

💡 vue3의 setup

vue3에서는 setup이 등장하여 많이 사용하지만
vue2에서 사용하던 코드를 맞춰 쓰기가 어려워서 추천하지 않는다

예를 들어 setup은 위의 표처럼 맨 처음에 한번만 로드되는데
vue2에서 사용하던 코드를 setup 안에서 지정해줘야 한다

export default {
  props: ['visible'],
  
  setup(props, context){
    state = reactive({
      count: 0,
    })
    watch(() => props.visible, (newValue, oldValue) => {
      console.log('props.visible 의 변이가 감지되었을 때 ', {newValue, oldValue})
    })
    watch(() => state.count, (newValue, oldValue) => {
      console.log('state.count 의 변이가 감지되었을 때 ', {newValue, oldValue})
    })
    return {
      state,
    }
  }
}

이런식으로 vue2에서 따로 사용하던 watch를
setup안에서 구현을 해줘야 하는데
작동이 잘 안될 수 있고 그에 맞는 자료 또한 너무 없어서
setup은 아직 추천하지 않는다

---

💡 created

DOM이 생성되기 전을 지정할 수 있다
data를 사전에 준비할 경우 사용한다는데
필자는 자주 사용하지 않는다
웬만하면 DOM이 생성된 후에 지정할게 많기 때문이다

---

💡 mounted

정말 자주 사용하는 코드 중 하나이다
DOM이 생성된 직후를 지정할 수 있는데
api를 사용할 때나 페이지 전환 후 초기화시킬 코드를 적는다

<script>
  export default {
    data(){
      return{
      }
    },
    mounted() {
	  this.test();
    },
    methods: {
      test(){
        //DOM 생성 후 실행할 함수 작성
      }
  	}
</script>

이런식으로 methods에 적은 함수를
mounted에 적어주면 해당 페이지에 접속할 때마다
함수를 초기화 시켜준다

js의 SSR의 단점을
CSR인 vue가 보완해주는 것 같다

---

💡 methods

methods는 함수를 작성하는 공간이다
대부분 methods에 함수 작성 후 mounted에서 실행시키는 방법과
DOM 이벤트 등록할 때 많이 사용한다

export default {
  data() {
    return {
      btn: false
    }
  },
  methods: {
    clickEvent() {
      this.btn = true;
    }
  },
}

...

<button @click="clickEvent">버튼</button>

간단하게 작성해보면 이렇다
vue의 각종 이벤트나 동적인 태그들은 모두 해당된다

---

💡 computed

computed와 watch는 비슷하지만 다르다
computed는 해당 속성이 종속된 대상이 변경될 때에만 실행되는데

<template>
  <div>
    <p>원본 메시지: "{{ message }}"</p>
    <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
export default {
  name: 'test',
  data(){
    return {
      message: '안녕하세요'
    }
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

사용 예제는 이렇다
함수에 어떤 데이터가 변경될 때 실행할 것인지를 지정해주어야 한다
그렇기 때문에 this.message의 값이 변경되지 않으면
reversedMessage의 값도 변경되지 않는다

---

💡 watch

watch는 computed처럼 값이 변경될 때를 감지하는데
데이터나 함수를 직접 선택할 수 있다

  <div>
    <p>원본 메시지: "{{ message }}"</p>
    <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
export default {
  name: 'test',
  data(){
    return {
      message: '안녕하세요',
      reversedMessage: ''
    }
  },
  watch: {
    message: function (newVal, oldVal) {
      this.reversedMessage = newVal.split('').reverse().join('')
    }
  }
}
</script>

예제를 보면 computed와 형식이 전혀 다르다
watch는 newVal(새로운 값), oldVal(기존 값) 파라미터가 정해져 있기 때문에
computed보다 사용법이 더 쉽고 간단하다

이렇게 되면 굳이 computed를 사용해야 할까? 라는 생각이 들 수 있다
watch가 더 쉽고 편하기 때문이다

하지만 데이터의 값을 감지하기 위한 로직이라면
computed를 사용하는 것이 맞고
api 같은 비동기식 또는 많은 시간이 필요한 작업에는 watch가 적절하다

결론은 computed로 구현이 되는 것들은 computed로 구현하는게 정답
computed로 구현되지 않는 것들은 watch로 구현하면 된다