[Vue.js] `<script setup>`을 사용하여 Vue 컴포넌트 간결하게 작성하기

<script setup>
// 데이터와 메서드를 선언합니다.
import { ref } from 'vue';

// ref를 사용하여 변수를 정의합니다.
const message = ref('');

// 입력된 메시지를 출력하는 함수를 정의합니다.
function showMessage() {
  alert(message.value);
}
</script>

Vue 3에서는 <script setup>을 사용하여 Vue 컴포넌트를 더 간결하게 작성할 수 있습니다. 이를 통해 데이터, 메서드, 컴포넌트 옵션 등을 간단하게 선언할 수 있습니다.

위의 예제는 <script setup>을 사용하여 Vue 컴포넌트 내에서 데이터와 메서드를 정의하는 방법을 보여줍니다. ref를 사용하여 message 변수를 정의하고, showMessage 함수를 선언하여 입력된 메시지를 알림창으로 출력하는 예제입니다.

<script setup>을 사용하면 Vue 컴포넌트를 작성하는 과정이 더 간단해지며, 코드의 가독성이 향상됩니다. 이를 통해 Vue 개발자는 더 효율적으로 코드를 작성하고 유지보수할 수 있습니다.