[KB IT's Your Life 7기] 5주차 교육 후기, Composition API

 

 

 

최근 Vue를 공부하다 보면 기존에 익숙했던 Options API와는 사뭇 다른 방식을 접하게 됩니다

바로 Vue 3에서 도입된 Composition API인데요

 

처음에는 "이미 잘 돌아가는 Options API가 있는데 왜 굳이 새로운 걸 배워야 하지?"라는 의문이 들 수도 있습니다

하지만 실제 현업, 특히 금융권처럼 안정성을 중시하는 곳에서는

여전히 Vue 2 기반의 유지보수 코드가 많습니다

 

반면 신규 프로젝트는 생산성과 확장성이 뛰어난 Vue 3의 Composition API를 채택하는 추세죠

결국 두 방식을 모두 이해하는 것이 실력 있는 개발자로 거듭나는 핵심이라고 할 수 있습니다

오늘은 Composition API의 핵심 개념과 주요 사용법을 정리해 보겠습니다

 

1. Composition API란 무엇인가

Composition API는 함수 기반으로 컴포넌트 로직을 구성하는 방식입니다

기존 Options API는 data, methods, computed 등 정해진 옵션 안에 코드를 작성해야 했습니다

이 방식은 규모가 커질수록 같은 기능을 하는 로직이 여러 곳에 흩어져 가독성이 떨어지고 재사용이 어렵다는 단점이 있었습니다

 

Composition API는 이를 해결하기 위해 논리적인 관심사별로 코드를 모아 관리할 수 있게 설계되었습니다

덕분에 복잡한 로직을 별도의 함수로 추출하여 여러 컴포넌트에서 손쉽게 재사용할 수 있습니다

---

2. setup 메서드와 생명 주기

Composition API의 시작점은 setup() 함수입니다

기존의 data, methods, computed 옵션들이 사라지고,

모든 초기화 작업이 이 setup 안에서 이루어집니다

 

생명 주기의 변화

가장 큰 차이점은 beforeCreate와 created 단계가 사라지고 setup()이 그 역할을 대신한다는 점입니다

나머지 생명 주기 훅들은 이름 앞에 on 접두어가 붙으며, setup 내부에서 콜백 함수를 전달하는 방식으로 사용합니다

 

• Options API: mounted, updated, unmounted
• Composition API: onMounted, onUpdated, onUnmounted

특히 부모-자식 컴포넌트 관계에서 setup은 부모부터 실행되지만,

마운트 완료(onMounted)는 자식 컴포넌트가 먼저 끝난 뒤

부모가 실행된다는 순서를 기억해야 합니다

---

3. 반응형 상태 관리: ref()와 reactive()

Vue의 핵심인 반응성(Reactivity)을 구현하는 방법도 달라졌습니다

데이터를 단순히 선언하는 게 아니라, Vue가 관찰할 수 있도록 ref나 reactive로 감싸주어야 합니다

 

ref()

기본 데이터 타입(Number, String, Boolean 등)에 주로 사용합니다

• 스크립트 내에서 접근할 때는 반드시 .value를 붙여야 합니다 (예: x.value = 20).
• 템플릿(Template)에서는 자동으로 풀리기 때문에 .value 없이 사용 가능합니다.
• const로 선언하면 실수로 객체 자체를 덮어씌우는 오류를 방지할 수 있어 안전합니다.

reactive()

객체나 배열 같은 참조 타입에 사용합니다.

• 여러 상태를 하나의 객체로 묶어서 관리할 때 유용합니다.
• .value를 붙일 필요 없이 일반 객체처럼 속성에 접근하면 됩니다 (예: state.x = 20).

---

4. computed()와 watch, watchEffect

computed() 기존의 계산된 속성과 동일합니다

특정 반응형 데이터에 의존하여 가공된 값을 반환할 때 사용하며,

의존 데이터가 변할 때만 재계산됩니다.

 

watch() 특정 데이터의 변화를 감시하여 API 호출이나

로그 기록 같은 부수 효과(Side Effect)를 수행할 때 씁니다

이전 값(old value)과 현재 값(current value)을 모두 확인할 수 있다는 특징이 있습니다

Tip: reactive 객체의 특정 속성을 감시할 때는 watch(() => state.x, ...)처럼 Getter 함수 형태로 전달해야 Vue가 정확히 추적할 수 있습니다.

watchEffect() watch와 비슷하지만 더 지능적입니다

함수 내부에서 사용하는 모든 반응형 데이터를 자동으로 추적하며,

코드가 실행될 때 즉시 한 번 실행됩니다

어떤 데이터를 감시할지 일일이 지정할 필요가 없어 코드가 간결해집니다

---

5. 가려운 곳을 긁어주는 script setup

Composition API를 더 쉽고 간결하게 쓸 수 있게 해주는 것이 바로 <script setup>입니다

1. 컴포넌트 등록 생략: 이전에는 import 후 components 옵션에 등록해야 했지만, 이제는 import만 하면 템플릿에서 바로 사용 가능합니다
2. return 생략: setup() 함수 마지막에 객체 형태로 변수를 반환하던 번거로움이 사라지고, 선언한 모든 변수와 함수를 템플릿에서 즉시 쓸 수 있습니다
3. 컴파일 타임 매크로:
   • defineProps: 부모에게 전달받은 props를 정의할 때 사용합니다
   • defineEmits: 부모에게 이벤트를 보낼 때 사용하며, 기존의 context.emit을 대체합니다

---

요약: 왜 Composition API인가?

결국 Composition API는 로직의 응집도를 높이기 위한 도구입니다

코드를 기능 단위로 묶을 수 있게 됨으로써 유지보수가 쉬워지고

TypeScript와의 궁합도 훨씬 좋아졌습니다

 

Options API를 통해 기본기를 다졌다면

이제 Composition API를 활용해 더 유연하고 확장성 있는 설계를 고민해 볼 때입니다!!!!

 

 

 

---

 

 

5주차를 수강하며...

어느새 봄이 되었습니다!!!!!

 

 

 

 

때마침 돗자리도 대여를 해주시길래!!!

다같이 엽떡을 포장해서 먹었습니다

원래는 어린이 대공원에서 벚꽃 보면서 먹는게 목표였는데

지리를 잘 몰라서 그냥 나무상판(??)) 에서 먹었습니다 ㅎㅎ

 

 

 

 

이건 요즘 제가 매일 보는 출근길인데

평소에는 다리 지나갈 때 고개를 안 들었거든요

근데 이제는 한번씩 들고 구경하게 되더라구요

 

역시 삶에 어느 정도의 여유는 있어야 되는 것 같습니다..

너무 어딘가에 박혀있으면 시야도 좁아지는 것 같구요!!!!

 

 

 

 

이건 매일 보는 퇴근길...

ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

가는 곳 바다 벚꽃이 활짝 펴있어요

빠르게 피고 빠르게 지겠지만 초반에 좋은 구경해서 좋았네요 ㅎㅎ

 

이제 3월도 끝이고, 4월에는 더 열심히 달려보게씁니다!!!

 

 

 

 

 

 

#멀티캠퍼스부트캠프후기 #멀티캠퍼스부트캠프 #KBITSYOURLIFE #KB국민은행부트캠프 #KB부트캠프