Vue.js 컴포넌트 작성 스타일 비교: <script> + setup() vs <script setup>

 

두 코드 블록은 Vue.js에서 컴포넌트를 작성하는 방식의 차이를 보여줍니다. 하나는 setup() 함수를 사용한 Options API 스타일이고, 다른 하나는 <script setup>이라는 Composition API의 간소화된 문법입니다. 

---

 

1. 기본 구조와 작성 방식

<script> + setup()

 

<script>
    import { reactive } from 'vue';

    export default {
        name: "TestView",
        setup() {            
            const friend = reactive({
                name: "홍길동",
                age: 20,
                address: "서울시 강남구",
                phone: "010-1234-5678",
                email: "aaa@bbb.com"
            });

            const changeName = () => {
                friend.name = "김철수";
            };

            return {
                friend,
                changeName
            };
        }
    }
</script>

• 특징: export default와 함께 setup() 함수를 사용합니다. 이는 Vue 3에서 Composition API를 Options API 스타일에 통합한 방식입니다.
• 동작: setup() 함수 안에서 반응형 데이터(reactive)와 함수를 정의하고, 템플릿에서 사용하려면 return으로 노출해야 합니다.
• 장점: 기존 Options API(data, methods 등)와 혼용 가능하며, 구조가 명시적입니다.
• 단점: 코드가 길어질수록 return에 반환할 변수와 함수가 많아져 번거로울 수 있습니다.

<script setup>

 

<script setup>
    import { reactive } from 'vue';

    const friend = reactive({
        name: "홍길동",
        age: 20,
        address: "서울시 강남구",
        phone: "010-1234-5678",
        email: "aaa@bbb.com"
    });

    const changeName = () => {
        friend.name = "김철수";
    };
</script setup>

• 특징: <script setup>은 Vue 3에서 제공하는 축약 문법으로, setup() 함수와 return 문을 생략합니다.
• 동작: <script setup> 안에 작성된 최상위 변수와 함수는 자동으로 템플릿에 노출됩니다. 별도로 return할 필요가 없습니다.
• 장점: 코드가 더 간결하고 직관적이며, 작성 속도가 빨라집니다.
• 단점: Options API와의 혼용이 어렵고, <script setup>만의 규칙을 따라야 합니다.

---

2. 주요 차이점

 

항목	<script> + setup()	<script setup>
문법	export default { setup() { ... } }	<script setup> 태그 사용
반환 필요 여부	return 으로 변수/함수를 명시적으로 반환	자동으로 최상위 변수/함수 노출
코드 간결성	상대적으로 장황함	더 간결하고 간소화됨
호환성	Options API와 혼용 가능	Composition API 전용
사용 사례	복잡한 로직이나 레거시 코드와의 통합 시 유리	현대적이고 간단한 컴포넌트 작성 시 유리

---

3. 동작상의 차이

• 두 코드 모두 동일한 결과를 생성합니다. 즉, friend라는 반응형 객체와 changeName 함수를 템플릿에서 사용할 수 있습니다.
• <script setup>은 setup()과 return을 생략한 syntactic sugar(문법적 편의)일 뿐, 내부적으로 동일한 Composition API를 기반으로 동작합니다.

---

4. 언제 무엇을 사용할까?

• <script> + setup():
  • 기존 Options API(data, methods, computed 등)를 함께 사용해야 하는 경우.
  • 코드의 구조를 더 명확히 드러내고 싶을 때.
• <script setup>:
  • 새로운 프로젝트에서 간결한 코드 작성을 원할 때.
  • Composition API만 사용할 계획일 때 (추천되는 현대적 방식).

---

728x90

 

질문의 두 코드는 기능적으로 동일하지만, <script setup>이 더 간결하고 직관적인 최신 문법입니다. Vue 3 공식 문서에서도 <script setup>을 권장하며, 특별한 이유(예: Options API와의 혼용)가 없다면 <script setup>을 사용하는 것이 좋습니다.