[vue3, type script] const 함수 생성 및 함수 결과값 리턴 방법

아래에 Vue 3 + TypeScript에서 const 함수(화살표 함수)를 선언하고 return 값을 제대로 받는 가장 기본적이고 자주 쓰는 패턴들을 정리한 내용이다.
(Composition API 기준)

1. 기본 const 함수 + return

const add = (a: number, b: number): number => {
  return a + b;
};

const result = add(3, 5); // 8

2. Vue setup() 안에서 const 함수 선언 + return

<script setup lang="ts">
const multiply = (x: number, y: number): number => {
  return x * y;
};

const answer = multiply(4, 6); // 24
</script>

3. Promise(비동기) 반환

API 호출 함수처럼 async 함수는 자동으로 Promise 타입을 리턴함:

const loadData = async (id: number): Promise<UserInfo> => {
  const res = await api.get(`/users/${id}`);
  return res.data;
};

const user = await loadData(10); 

4. 반환 타입 명시하기 (추천)

TypeScript에서 명시해두면 IDE 자동완성이 좋아져.

const getMessage = (): string => {
  return "Hello";
};

const message = (): void => {
}

const message = (): string | null => {

  if (v1 && v2 && v1 === v2) {
    return "IP1과 IP2는 서로 다른 값을 입력해야 합니다.";
  }

  return null;

}

5. 객체 반환

const makeUser = (name: string, age: number): { name: string; age: number } => {
  return { name, age };
};

const user = makeUser("Tom", 20);

6. Vue의 reactive(), ref() inside function

ref/reactive 값을 함수에서 리턴해도 문제 없음.

const useCounter = () => {
  const count = ref(0);

  const inc = () => count.value++;
  const dec = () => count.value--;

  return { count, inc, dec };
};

const { count, inc, dec } = useCounter();

7. 실제 Vue 코드 예시

아마 이런 코드가 필요할 가능성이 높아:

예: customerUserId 넘겨서 API 호출하는 함수 만들기

const loadIpSetting = async (customerUserId: string): Promise<any> => {
  const res = await api.get(`/test/call.api`, {
    params: { userId }
  });
  return res.data;
};

const openPopup = async (id: string) => {
  const data = await loadIpSetting(id);
  console.log("API 결과:", data);
};

예: 2개의 IP 입력 체크

const ipRegex =
  /^(?:\d{1,3}\.){3}\d{1,3}(?:\/([0-9]|[12][0-9]|3[0-2]))?$/;

const isValidIp = (ip: string) => ipRegex.test(ip);

const validateIpInputs = (): string | null => {
  //const v1 = ip1.value.trim();
  //const v2 = ip2.value.trim();

  const v1 = (ip1.value ?? "").toString().trim();
  const v2 = (ip2.value ?? "").toString().trim();

  // 1. 둘 다 비어있으면
  if (!v1 && !v2) {
    return "IP를 최소 1개 이상 입력해주세요.";
  }

  // 2. IP2만 입력됨 → 금지
  if (!v1 && v2) {
    return "IP를 1개만 입력하는 경우 첫 번째 입력란(IP1)에 입력해야 합니다.";
  }

  // 3. IP1 형식 확인
  if (v1 && !isValidIp(v1)) {
    return "첫 번째 IP 형식이 올바르지 않습니다.";
  }

  // 4. IP2 형식 확인
  if (v2 && !isValidIp(v2)) {
    return "두 번째 IP 형식이 올바르지 않습니다.";
  }

  // 5. 두 개 다 입력 → 같은 값이면 금지
  if (v1 && v2 && v1 === v2) {
    return "IP1과 IP2는 서로 다른 값을 입력해야 합니다.";
  }

  return null; // Validation 통과
};

const onSave = () => {
  const message = validateIpInputs();

  if (message) {
    alertMessage.value = message;
    isAlertPopup.value = true;
    return;
  }

  saveIpSettings();
};

ip1.value.trim() 에서 오류가 발생하는 이유는
ip1.value가 null, undefined, 숫자, 또는 빈 객체일 때 trim()을 쓸 수 없기 때문이야.

즉, string 타입이 아닌 값에서 trim()을 호출하면 에러 발생.

정리