0Pricing
Vue Academy · 강의

생명주기 훅과 데이터 가져오기

컴포넌트 생명주기의 적절한 시점에 데이터를 가져옵니다.

생명주기 훅과 데이터 가져오기은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 3개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

데이터를 가져올 시점

컴포넌트에는 수명 주기가 있습니다. 컴포넌트는 생성되고, DOM에 마운트되며, 업데이트된 후 결국 마운트 해제됩니다. 데이터를 가져올 때 어떤 수명 주기 훅을 사용해야 하는지 알면 앱을 반응성이 좋고 올바르게 유지할 수 있습니다.

생성 훅

created 훅은 반응형 데이터가 설정된 후, 컴포넌트가 DOM에 삽입되기 전에 실행됩니다. 반응성이 이미 작동하므로 데이터 가져오기를 시작하기에 좋은 위치입니다.

export default {
  data() {
    return { posts: [] }
  },
  created() {
    this.fetchPosts()
  }
}

마운트 훅

mounted 훅은 컴포넌트가 DOM에 삽입된 후 실행됩니다. 데이터를 가져오는 로직에서 DOM 요소나 렌더링된 요소를 필요로 하는 서드파티 라이브러리에 액세스해야 할 때 사용하세요.

export default {
  mounted() {
    this.fetchPosts()
    // template refs are now available here
  }
}

생성 훅과 마운트 훅 비교

순수하게 데이터를 가져오는 작업이라면 둘 다 사용할 수 있습니다. created가 조금 더 일찍 실행되므로 요청도 더 빨리 시작됩니다. 렌더링된 DOM이 실제로 필요할 때만 mounted를 선택하세요. 대부분의 API 호출에서는 어느 쪽을 사용해도 괜찮습니다.

Composition API의 onMounted

컴포지션 API에서는 수명 주기 훅을 가져온 함수로 사용하며 setup 내부에서 호출합니다. mounted에 해당하는 훅은 onMounted입니다.

import { ref, onMounted } from "vue"
import { api } from "./api"

export default {
  setup() {
    const posts = ref([])
    onMounted(async () => {
      const res = await api.get("/posts")
      posts.value = res.data
    })
    return { posts }
  }
}

로딩 상태 패턴

네트워크 요청에는 시간이 걸립니다. loading 플래그를 추적하면 데이터가 도착하는 동안 로딩 표시기를 보여 주고 완료되었을 때 숨길 수 있습니다.

data() {
  return {
    posts: [],
    loading: false
  }
}

로딩 상태 전환하기

요청 전에 loading을 true로 설정하고, 결과와 관계없이 요청 후에는 false로 되돌립니다.

async fetchPosts() {
  this.loading = true
  try {
    const res = await api.get("/posts")
    this.posts = res.data
  } finally {
    this.loading = false
  }
}

로딩 표시기 보여 주기

템플릿에서 로딩 플래그의 값에 따라 데이터가 도착하는 동안 로딩 표시기나 메시지를 표시합니다.

<template>
  <p v-if="loading">Loading...</p>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

빈 결과 처리하기

항상 빈 응답을 고려해야 합니다. 가져온 목록에 항목이 없으면 친절한 메시지를 표시하세요.

<ul v-if="posts.length">
  <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
<p v-else>No posts found.</p>

컴포지션 API 로딩 패턴

참조를 사용하면 동일한 로딩 패턴을 컴포지션 API에도 자연스럽게 적용할 수 있습니다.

const posts = ref([])
const loading = ref(false)

async function load() {
  loading.value = true
  try {
    posts.value = (await api.get("/posts")).data
  } finally {
    loading.value = false
  }
}

onMounted(load)

가져온 데이터 표시하기

데이터가 반응형 상태에 들어오면 템플릿이 자동으로 렌더링합니다. 세련된 사용자 경험을 위해 로딩 상태, 데이터 상태, 빈 상태를 함께 처리하세요.

<template>
  <section>
    <p v-if="loading">Loading...</p>
    <ul v-else-if="posts.length">
      <li v-for="p in posts" :key="p.id">{{ p.title }}</li>
    </ul>
    <p v-else>Nothing here yet.</p>
  </section>
</template>

간단히 확인하기

수명 주기 훅과 데이터 가져오기에 대한 지식을 테스트해 보세요.

복습

컴포지션 API에서는 created 또는 mounted(또는 onMounted)에서 데이터를 가져오세요. try/finally로 loading 플래그를 추적하면 UI에 로딩 표시기를 보여 주고, 데이터를 렌더링하며, 빈 결과를 처리할 수 있습니다. 다음에는 오류를 처리하고 인터셉터를 사용하여 이러한 요청을 더 견고하게 만들어 보겠습니다.

자주 묻는 질문

“생명주기 훅과 데이터 가져오기” 강의는 무료인가요?

네 — “생명주기 훅과 데이터 가져오기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“생명주기 훅과 데이터 가져오기”에서 뭘 배우나요?

컴포넌트 생명주기의 적절한 시점에 데이터를 가져옵니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 2번째 강의입니다.

“생명주기 훅과 데이터 가져오기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. Axios를 활용한 HTTP 요청
  2. 생명주기 훅과 데이터 가져오기
  3. 오류 처리와 전역 인터셉터
← Vue Academy(으)로 돌아가기