Nuxt 3 useFetch의 refresh 함수: 동작 원리와 실전 활용법

Nuxt 3에서 데이터를 불러올 때 자주 사용하는 useFetch()는, 단순히 API 요청을 넘어서 반응형 데이터 관리와 편리한 갱신 기능까지 제공합니다. 그중 refresh 함수는 데이터 최신화를 매우 간단하게 만들어주는 핵심 도구입니다. 이번 글에서는 refresh가 무엇인지, 어떻게 동작하며, 실전에서는 어떻게 더 유용하게 쓸 수 있는지 자세히 알아보겠습니다.

useFetch가 반환하는 값과 refresh 함수란?

Nuxt 3의 useFetch()를 사용하면 아래와 같이 다양한 값을 받아올 수 있습니다.

const { data, pending, error, refresh } = await useFetch('/api/task/get_task/123')

• data: API 요청 결과(reactive, 즉시 UI 반영)
• pending: 로딩 상태
• error: 에러 정보
• refresh: 해당 요청을 다시 실행해서 data를 갱신하는 함수

즉, refresh 함수는 같은 URL, 동일한 파라미터로 API를 다시 호출해 data 값을 즉시 업데이트합니다.

refresh 함수의 동작 방식

refresh()는 단순히 데이터를 다시 불러오는 것 이상의 기능을 제공합니다. 실제로 Nuxt 3 내부에서는 아래와 같이 동작합니다.

• 최초 호출: API 요청 + 데이터 캐싱
• refresh 호출: 기존 캐시를 무시하고, API를 다시 불러와 최신 결과로 data 갱신
• data.value: 자동으로 갱신되어 UI가 즉시 반응

예시 코드

const { data, refresh } = await useFetch('/api/task/123')

async function onUpdateButtonClick() {
  await refresh() // 최신 데이터로 즉시 갱신
}

언제 refresh를 활용하면 좋을까?

아래와 같은 상황에서 refresh()가 매우 유용하게 쓰입니다.

• 새로고침 버튼 클릭 시
• POST/PUT 등으로 데이터가 변경된 직후, 최신 상태 반영이 필요할 때
• 자동 갱신이 아닌, 사용자가 트리거할 때만 데이터 업데이트가 필요할 때

await $fetch('/api/task/update', { method: 'POST', body: {...} })
refresh() // 변경 직후 데이터 갱신

함수 네이밍: 내 코드에 맞게 자유롭게 바꾸기

refresh는 단순히 반환 객체의 속성이기 때문에, 자유롭게 원하는 이름으로 destructuring 할 수 있습니다.

네이밍 예시

const { data: task, refresh: refreshTask } = await useFetch('/api/task/123')
const { data: logs, refresh: refreshLogs } = await useFetch('/api/task/123/logs')

• refreshTask() → task만 새로 요청
• refreshLogs() → 로그만 새로 요청

실제 프로젝트에서는 refreshUser, refreshList, reloadPost 등 목적이 명확한 이름으로 바꿔주면 가독성이 올라가고 유지보수도 쉬워집니다.

destructuring 커스터마이즈 예시

변수명을 자유롭게 지정해 코드의 의도를 명확히 할 수 있습니다.

const { data: post, refresh: reloadPost } = await useFetch('/api/post/1')

// 이제 reloadPost()만 호출하면 포스트 데이터가 새로고침됨

표로 정리하는 useFetch와 refresh

마무리: 실전 프로젝트에서 refresh를 잘 활용하려면

정리하자면, refresh는 Nuxt 3의 useFetch()가 자동으로 제공하는 데이터 재요청 도우미 함수입니다. 네이밍도 자유롭게 바꿀 수 있어, 여러 API 요청을 다루는 복잡한 화면에서도 각각의 데이터 갱신을 명확하게 관리할 수 있습니다.

실무에서는 각 데이터 소스별로 refreshTask, refreshUser, refreshList 등으로 구분하여 사용하면 코드의 가독성과 유지보수성이 크게 향상됩니다.
Nuxt 3의 반응형 fetch 패턴을 제대로 활용해, 더 견고하고 신뢰할 수 있는 프론트엔드 코드를 작성해보세요.