[Vue 3.0] data()와 methods() 대신 setup() 사용하기

개요

오랜만에 Vue를 통해 프론트엔드를 구현하게 되었는데 Vue 2.0때와 사용 방법이 크게 달라지는 부분이 있어 포스팅하게 되었다.

 

Before

export default {
  data() {
    return {
      inputRef: null,
      uploadedImage: '',
    };
  },
  methods: {
    handleChange(e) {
      // change 이벤트 함수
      showImage();
    };

    handleDrop(e) {
      // drop 이벤트 함수
      showImage();
    };

    showImage() {
      
    }
  }, 
};

기존이 위처럼 data에서 변수명을 선언하고 methods에서 함수를 선언해 사용했다면

 

After

import { ref } from 'vue';
export default {
  setup() {
    const inputRef = ref(null);
    const uploadedImage = ref('');

    const handleChange = (e) => {
      // change 이벤트 함수
      showImage();
    };

    const handleDrop = (e) => {
      // drop 이벤트 함수
      showImage();
    };

    const showImage = () => {
      
    }

    return {
      inputRef, 
      uploadedImage, 
      handleChange, 
      handleDrop, 
    }
  }, 
};

이제는 react와 비슷하게 setup 안에서 javascript 문법으로 모든걸 선언한 후

return을 통해 외부에서 사용하게 만들어주면 된다.

다만, 변수의 경우 ref를 사용해야 하는 부분이 살짝 불편할 수 있다. 

 

그래도 data와 methods를 사용할 때는 정해진 방법으로만 사용해야했는데

setup 안에서 자유롭게 javascript 문법을 사용할 수 있게 된 점이 매우 편해 이렇게 포스팅을 작성하게 되었다.

 

이 방법을 통해 구현한 코드는 아래 링크에서 확인할 수 있다.

 

https://github.com/cchoseonghun/Euttm-Frontend

GitHub - cchoseonghun/Euttm-Frontend