오늘의 공부

vue 컴포넌트는 option API와 composition API 두 가지 스타일로 작성할 수 있다. vue를 접하며 중요한 주제인 것 같아 정리해본다!

option API

: vue 컴포넌트의 전통적인 방식

• state의 행동을 정의하기 위해 data, methods, computed 같은 옵션들을 사용하는 것
• 장점
  • 간단하고 이해하기 쉬움
• 단점
  • 컴포넌트가 증가하면서 복잡해지는 옵션들을 다루기 어렵게 됨 → option explosion
  • 컴포넌트들 사이에 로직을 공유하는 것이 어려움 → 재사용성 이슈

compotision API

: option API의 한계를 다루기 위해 vue3에서 소개된 컴포넌트를 만드는 새로운 방법

• 함수적, 리액티브 프로그래밍 스타일을 사용할 수 있게 해줌
• import 해서 가져온 api 함수들을 사용하여 컴포넌트 로직을 정의함
• setup 속성은 컴파일 시 의도한 대로 올바르게 동작할 수 있게 코드를 변환하도록 함
• 장점
  • 컴포넌트들 사이에 로직을 공유하는 것이 쉬움
  • 효율적이고 압축적임
  • 유지보수와 유연성이 좋아짐
• 단점
  • 함수형, 리액티브 프로그래밍에 익숙하지 않은 개발자들이 활용하기가 어려움
  • vue2.6과 그 아래에서 호환되지 않음

provide / inject

: 부모 → 자식으로 값을 전달하기 위한 의존성 주입 기능

• 숨겨진 의존성이 생기고, 어느 부모에서 무엇을 제공했는지 추적이 어려움
• 버그 추적이 어려움
• ts 타입 추론이 약함

마치며

vue를 처음 접하는 사람에겐 아무래도 composition api가 더 쉽게 읽혔던 것 같다. 물론 아직도 optionAPI이던, compositionAPI던 쉽지 않지만 🥲 그래도 하나하나 해 나가본다!