setup() 함수와 script setup
setup() 함수에 로직을 작성하거나 문법을 사용하고, 값을 템플릿에 노출하며, Composition API의 생명 주기 훅을 이해합니다.
setup() 함수와 script setup은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
setup() 함수
Vue 3의 Composition API에서 setup()은 data, methods, computed, watch를 대체하는 구성 요소 옵션입니다. props와 setup 컨텍스트를 인수로 받아 템플릿에 필요한 것을 반환합니다.
export default {
props: { userId: String },
setup(props, { emit, attrs, slots }) {
const user = ref(null);
onMounted(async () => {
user.value = await fetchUser(props.userId);
});
return { user }; // must return what template uses
}
};<script setup> — 문법적 편의 구문
<script setup>은 setup()을 위한 컴파일 시점의 문법적 편의 구문입니다. 최상위에서 선언한 모든 항목을 템플릿에서 자동으로 사용할 수 있습니다. return 문은 필요하지 않습니다.
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const count = ref(0);
// count is automatically available in template
</script>setup()의 생명주기 훅
Vue 3의 생명주기 훅은 가져와서 사용하는 함수입니다: onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate 등입니다. 여러 핸들러를 등록하기 위해 여러 번 호출할 수 있습니다.
<script setup>
import { onMounted, onUnmounted } from 'vue';
let timer: ReturnType<typeof setInterval>;
onMounted(() => {
timer = setInterval(tick, 1000);
console.log('Component mounted');
});
onUnmounted(() => {
clearInterval(timer); // cleanup
});
</script>setup()의 Props
setup()에서 props는 반응형입니다. 직접 구조 분해하지 마십시오. 반응성을 유지하려면 toRefs(props)를 사용하거나 props.x로 접근하십시오.
const props = defineProps<{ userId: string }>();
// Reactive access:
watch(() => props.userId, (id) => fetchUser(id));
// toRefs for destructuring:
const { userId } = toRefs(props);defineExpose() — 부모에 공개하기
기본적으로