[Vue3] Composition API 사용법 (팔로워 페이지)

gminnimk·2025년 3월 22일

Vue3

목록 보기

34/39

follower.json 에 들어갈 데이터

[
  { "id" : 0, "name" : "_Limvely", "image" : "https://picsum.photos/200?r=0" },
  { "id" : 1, "name" : "salmon_X", "image" : "https://picsum.photos/200?r=1" },
  { "id" : 2, "name" : "360noscope", "image" : "https://picsum.photos/200?r=2" },
  { "id" : 3, "name" : "Jeony_1", "image" : "https://picsum.photos/200?r=3" },
  { "id" : 4, "name" : "mihyeon", "image" : "https://picsum.photos/200?r=4" }
]

1️⃣ Vue 파일이 길어질 때의 문제 & Composition API의 장점

기존 Options API에서는 data, methods, computed 등 관련된 기능이 분산되어 있어서 특정 데이터를 찾으려면 여러 위치(예: 150번, 380번, 670번 줄 등)를 뒤져야 합니다.
Composition API를 사용하면 관련된 기능들을 한 곳에서 모아 작성할 수 있으므로 코드 관리와 가독성이 좋아집니다.
다만, 문법이 기존 방식보다 약간 귀찮을 수 있습니다.

2️⃣ 마이페이지(MyPage.vue) 만들기

내 팔로워 목록을 보여주는 간단한 페이지를 만들어보며 Composition API 사용법을 익힙니다.

HTML 템플릿

<template>
  <div style="padding: 10px">
    <h4>팔로워</h4>
    <input placeholder="?" />
    <div class="post-header">
      <div class="profile"></div>
      <span class="profile-name">사용자명</span>
    </div>
    <!-- 예시: 팔로워 데이터를 화면에 출력 -->
    <ul>
      <li v-for="item in follower" :key="item.id">
        <img :src="item.image" alt="프로필 이미지" width="50" />
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

script

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

// Composition API로 팔로워 배열 데이터 생성
const follower = ref([])

// 컴포넌트 마운트 후 Ajax 요청으로 데이터 로드
onMounted(() => {
  axios.get('/follower.json').then(response => {
    follower.value = response.data
  })
})
</script>

※ 기존 Options API 문법 (Vue 2)에서는 data()와 setup() 안에서 return { follower } 했었으나, Vue 3의 문법에서는 return 없이 바로 template에서 사용할 수 있습니다.

3️⃣ Container.vue에서 MyPage 컴포넌트 사용하기

Container.vue 템플릿 및 스크립트

<template>
  <div v-if="step === 3">
    <MyPage />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MyPage from './MyPage.vue'

</script>

4️⃣ App.vue에서 Container 컴포넌트 사용하기

App.vue 템플릿 및 스크립트

<template>
  <Container />
</template>

<script setup>
import Container from './Container.vue'
</script>

※ 기존에는 App.vue에서 data() { return { step: 3 } }로 강제로 step을 3으로 설정했지만, Container.vue에서 이미 Composition API로 처리하므로 App.vue는 간결하게 컴포넌트만 불러오면 됩니다.

5️⃣ Composition API로 데이터 다루는 법

ref() 사용: Vue 3에서는 데이터를 반응형으로 만들기 위해 ref() 함수를 사용합니다.

<script setup>
import { ref } from 'vue'
const follower = ref([]) // 초기값 []
</script>

데이터 변경 시: ref()로 만든 변수의 값을 바꿀 때는 반드시 .value를 사용합니다.
```
follower.value = response.data
```

Lifecycle Hook 사용: Options API의 created(), mounted() 대신 onMounted(), onBeforeUpdate() 등으로 사용합니다.

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

const follower = ref([])

onMounted(() => {
  axios.get('/follower.json').then(response => {
    follower.value = response.data
  })
})
</script>

※ created()는 Composition API의 setup() 내부에 코드를 작성하는 것과 유사하므로 onCreated()라는 함수는 없습니다.

6️⃣ 최신 업데이트: 사용하기

요즘은 <script setup>을 사용하여 코드가 더욱 간결해졌습니다.

예시:

<script setup>
import { ref } from 'vue'
const follower = ref([1, 2, 3])
</script>

<template>
  <div>{{ follower }}</div>
</template>

<script setup> 내에서 선언한 변수는 자동으로 template에 노출되므로 return할 필요가 없습니다.

7️⃣ Ajax 요청 & 데이터 변경 (axios 사용 예제)

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

const follower = ref([])

onMounted(() => {
  axios
	  .get('/follower.json')
	  .then(response => {
	    follower.value = response.data
  })
})
</script>

<template>
  <div v-for="item in follower" :key="item.id">
    {{ item.name }}
  </div>
</template>

※ Vue 2 Options API에서는 return { follower }로 반환했지만, Composition API에서는 필요 없습니다.

8️⃣ Lifecycle Hook 사용 예

onMounted: 컴포넌트가 부착된 후 실행
onBeforeUpdate: 업데이트 직전에 실행
사용법은 기존의 lifecycle hook 이름에서 앞에 on을 붙여 사용합니다.

예시:

<script setup>
import { onMounted, onBeforeUpdate } from 'vue'

onMounted(() => {
  // 마운트 후 실행할 코드
})

onBeforeUpdate(() => {
  // 업데이트 직전 실행할 코드
})
</script>

9️⃣ (참고) Options API vs Composition API

Options API (Vue 2 방식):
데이터, 함수, 컴포넌트를 따로 분리하여 관리
→ 자바스크립트 초보에게는 익숙하지만 관련 기능끼리 모으기 어려움
Composition API (Vue 3 방식):
관련 기능을 한 곳에서 모아서 작성 가능
→ 코드가 길어질 때 관리와 가독성이 향상됨