[Vue.js] Vue 3에서 API 호출은 언제 하는 게 맞을까?

시험을 준비하면서 API를 호출하는 load함수를 언제 사용하는지 너무 헷갈렸다.

다른 사람들 코드를 참고했을 때 누구는 onMount안에 호출을 하였고, 누군간 단순히 setup안에 비동기 코드를 작성하였다.

Vue 생명주기를 보면 해결 가능한 간단한 문제였지만, 잊지 않고자 적어보려한다 ㅎ.ㅎ

 

해당 과정을 이해하려면 Vue 의 생명주기를 다시 알아야한다. 

1. setup() 실행 (DOM 렌더 전)
2. DOM 렌더링 (Template → HTML로)
3. onMounted() 실행 (사용자에게 화면 보여짐)

 

즉, setup()은 렌더링 전에 실행, onMounted()는 렌더링 이후에 실행된다.

목적에 따라 API 호출 타이밍을 달리할 수 있다.

1. setup() 안에서 API 호출 (렌더 전에 데이터 확보)

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const data = ref(null);

// DOM 렌더 전에 await로 데이터 미리 받아둠
const response = await axios.get('/api/data');
data.value = response.data;
</script>

<template>
  <div>{{ data }}</div>
</template>

 

• 사용자가 "완성된 상태의 화면"을 보게 됨
• 로딩 중 빈 화면이 나올 수 있음 → UX상 로딩 스피너 필요
• 초기에 필요한 핵심 데이터를 미리 확보해야 할 때 사용

2. onMounted() 안에서 API 호출 (렌더 후 데이터 비동기 처리)

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const data = ref(null);

onMounted(async () => {
  const response = await axios.get('/api/data');
  data.value = response.data;
});
</script>

<template>
  <div v-if="data">{{ data }}</div>
  <div v-else>Loading...</div>
</template>

 

• 화면은 먼저 뜨고, 데이터는 나중에 로드됨
• 사용자에게 빠른 피드백 제공 가능 (UX 향상)
• 비동기 데이터가 필수가 아닌 경우 유용

주의: setup()에서 await을 쓰면 렌더링이 지연됨

const result = await axios.get('/api/slow');
// 이 줄에서 멈춤 → 화면 렌더도 멈춤

Vue는 setup() 내부에서 await가 사용되면, 데이터가 준비될 때까지 컴포넌트 렌더링을 멈춘다.

첫 화면이 느리게 뜰 수 있으므로, 로딩 중 상태를 사용자에게 명확히 보여줘야 한다.