[Vue3, Ts] () => { } 화살표 함수 설명 및 예제
@submit="() => {
getList()
}"구성 요소 설명:
1. @submit
@submit은 Vue의 이벤트 리스너 문법입니다.- HTML의
submit이벤트를 Vue 방식으로 감지하고 처리할 때 사용합니다. - 이 코드는 폼(
<form>) 요소 등에 사용되어, 사용자가 폼을 제출할 때 특정 동작을 실행하도록 합니다.
2. () => { getList() }
- 이것은 화살표 함수(arrow function)입니다.
- 폼이 제출되면
getList()함수를 실행합니다. - 화살표 함수로 감싸는 이유는 주로 다음 두 가지입니다:
- 나중에 확장 가능성 (여기에 로직 추가 가능)
- 명확한 스코프 유지 (
this가 필요 없는 경우 간단하게 사용 가능)
전체 맥락 예시:
<template>
<form @submit.prevent="() => { getList() }">
<button type="submit">검색</button>
</form>
</template>
<script lang="ts" setup>
function getList() {
console.log('목록 요청');
}
</script>
참고:
.prevent수식어를 사용하면 기본 폼 제출 동작(페이지 새로고침)을 방지할 수 있습니다.- 위 코드에서는
getList()가 사용자의 제출 이벤트에 반응하여 실행되는 구조입니다.
화살표 함수 앞에는 항상 ()를 사용해? ()안에 뭐가 들어갈수있을까?
화살표 함수 ()=>{} 문법에서 ()는 매개변수(parameter)를 받는 부분입니다.
()는 함수의 매개변수 목록입니다.
✅ 언제 ()를 쓰나요?
1. 매개변수가 없을 때:
아무 인자도 받지 않을 때는 반드시 ()를 써야 합니다.
() => {
console.log("hello");
}
2. 매개변수가 하나일 때:
괄호 생략 가능: 파라미터가 하나뿐이라면 () 생략 가능.
하지만 타입스크립트에서는 타입을 명시해야 하는 경우가 많아 괄호를 씁니다:
name => {
console.log(name);
}
(name: string) => {
console.log(name);
}
3. 매개변수가 여러 개일 때:
매개변수가 2개 이상일 경우 괄호는 필수입니다.
(id, name) => {
console.log(id, name);
}
개변수 안에 들어갈 수 있는 것들
- 일반 변수들:
(x, y) => x + y - 타입이 지정된 변수들 (TypeScript):
(x: number, y: number) => x + y - 구조 분해(destructuring):
({ name, age }) => { console.log(name, age); }
✅ 예시 정리
| 사용 예시 | 설명 |
|---|---|
() => {} | 매개변수 없음 |
x => x * 2 | 매개변수 하나 (괄호 생략 가능) |
(x, y) => x + y | 매개변수 여러 개 (괄호 필수) |
(x: number) => x * 2 | 타입스크립트에서는 타입 때문에 괄호 필수 |
Vue 3의 watch 함수에서 화살표 함수 사용 예시
watch(
() => [searchParams.value.startDate, searchParams.value.endDate],
([newStart, newEnd], [oldStart]) => {
});🔍 이 코드에서 쓰이는 핵심 요소들
✅ watch
- Vue 3의
watch()는 반응형 데이터의 변화를 감지해서 그에 따라 어떤 동작을 실행하고 싶을 때 사용합니다. - 구문은:
watch(source, callback)각 요소 설명
1. () => [searchParams.value.startDate, searchParams.value.endDate]
- 감시할 대상입니다. 이건 “소스(source)”라고 부르며, 여기서는 두 값을 감시하고 있어요:
searchParams.value.startDatesearchParams.value.endDate
watch()는 이 두 값 중 하나라도 변경되면, 아래의 콜백 함수가 호출됩니다.- 배열로 묶은 이유는 여러 값을 동시에 감시하기 위해서입니다.
2. ([newStart, newEnd], [oldStart]) => { ... }
- 이것은 감시된 값이 바뀌었을 때 실행될 콜백 함수입니다.
- 이 함수는 두 개의 인자를 받습니다:
- 첫 번째 인자:
newValues→ 새로운 값들 - 두 번째 인자:
oldValues→ 이전 값들
- 첫 번째 인자:
여기서:
[newStart, newEnd]는 변경 후 값 (startDate, endDate)[oldStart]는 변경 전 값 (배열 구조 분해인데,oldEnd는 무시되고 있음)
➡️ 즉, 누군가 startDate나 endDate를 변경하면, 이 함수가 호출되고 새 값과 이전 값이 전달됩니다.
🔄 예를 들어:
ts복사
편집
searchParams.value.startDate = '2025-01-01'; searchParams.value.endDate = '2025-01-10';
이런 식으로 둘 중 하나라도 바뀌면, 콜백이 실행됩니다. 그때 다음과 같이 값이 들어옵니다:
ts복사
편집
([newStart, newEnd], [oldStart, oldEnd]) => { console.log('바뀐 날짜:', newStart, newEnd); console.log('이전 날짜:', oldStart, oldEnd); }
🧠 왜 [oldStart]만 썼을까?
- 이 코드에서는
oldStart만 필요해서oldEnd는 생략한 것입니다. - 필요하다면 이렇게도 쓸 수 있어요: ts복사편집
([newStart, newEnd], [oldStart, oldEnd]) => { ... }
✨ 요약
| 구성 요소 | 설명 |
|---|---|
watch() | 반응형 데이터를 감시함 |
() => [A, B] | A 또는 B가 바뀌면 감지 |
([newA, newB], [oldA, oldB]) => {} | 값이 바뀔 때 실행되는 함수 (새 값과 이전 값 받음) |
[연관자료]
