[Vue.js3] <script> or <script setup>

Composition API

Vue.js3 에서 CompositionApi를 사용하라고 "권장"하고 있다.

쭉 사용해보고 나니 확실히 사용하기 편해 OptionsApi를 멀리하는것이 당연해 질 정도이다.

 

점점 Vue.js3에서 좋은 방향으로 권장하고 있는 부분들이 있는데

그 중 하나가 <script setup>이다.

<script>
export default {
    name: "BoardTable",
    props: ["boardList"],
    setup() {

        //날짜 포맷팅
        const formatDateTime = (dateTime) => {
            if (dateTime) {
                const date = new Date(dateTime);

                const year = date.getFullYear() - 2000;
                let month = date.getMonth() + 1;
                let day = date.getDate();
                let hour = date.getHours();
                let minute = date.getMinutes();

                return year + "-" + padZero(month) + "-" + padZero(day) + ' ' + padZero(hour) + ':' + padZero(minute);
            } else {
                return "-";
            }
        };

        //날짜 포맷팅
        const padZero = (number) => {
            return number < 10 ? "0" + number : number;
        };

        //카테고리 파싱
        const parseCategory = (category) => {
            return category.toLowerCase();
        }

        return {
            formatDateTime,
            parseCategory,
        }
    },
}
</script>

현재 진행하고 있는 토이프로젝트의 일부분이다.

CompositionApi를 적용하였지만 Vue.js를 공부하면서 매번 export default를 통해

name, composition, props..등등 지정하면서 import시키는 부분이 귀찮고도 궁금했지만 그냥저냥 사용하고 있었다.

export default는 찾아보니 javascript에서 하나의 클래스로 동작하는 개념인 것 같지만 깊게 적혀있는 블로그가 없어 더 찾지 않았다.

 

무튼.

<script> 와 <script setup>

이 둘 중 Vue.js는 <script setup>을 사용하라고 권장하고 있다.

 

<script setup>의 경우 매번 export default 모듈을 사용하는 것이 아닌 <script>태그안에 setup 펑션을 달아두어

불필요한 부분

1. 매번 return을 적어주어야하는것
2. name, composition 등등 을 정의하는 것

을 제거하였다. (코드가 상당히 깔끔해 보이게 되었다.)

 

---

예시

<script setup>

//props 가져오기!
const props = defineProps(['boardList']);

//날짜 포맷팅
const formatDateTime = (dateTime) => {
    if (dateTime) {
        const date = new Date(dateTime);

        const year = date.getFullYear() - 2000;
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        let minute = date.getMinutes();

        return year + "-" + padZero(month) + "-" + padZero(day) + ' ' + padZero(hour) + ':' + padZero(minute);
    } else {
        return "-";
    }
};

//날짜 포맷팅
const padZero = (number) => {
    return number < 10 ? "0" + number : number;
};

//카테고리 파싱
const parseCategory = (category) => {
    return category.toLowerCase();
}

</script>

위에 코드를 바꿔보았다.

사실 <script>태그에선 내가 가져온 props 데이터를 곧바로 <script>안에서 사용하는것이 불가능한걸로 알고있었다.

하지만 <script setup>은 

defineProps를 통해 props 객체로 만들어서 <script>태그 안에서 사용해도되고 곧바로 'boardList'라는 객체를 html에 뿌려줄수도 있다.

또한 이제는 버릇이 되었지만, return을 통해서 매번 const 객체들을 반환해주는것이 정말 귀찮았다.

코드줄도 길어지고 깜빡하면 없다고 에러가 나오니 뭐였지? 하다가 의외로 시간을 많이 까먹었다.

 

https://vuejs.org/api/sfc-script-setup.html

<script setup> | Vue.js

번역해놓고 한번 쭉 읽어보면 이해가 금방되기 때문에 읽어보시는걸 추천한다.