Vue.js
Vue.js 개발스타일
해갈
2024. 5. 2. 19:21
Vue.js 개발 스타일에는 Options API 와 Composition API 두 가지 방식이 있습니다.
Options API
- 대표적으로 data, methods 및 mounted 같은 객체를 사용해 컴포넌트 로직을 정의하는 개발 스타일입니다.
- 옵션으로 정의된 속성은 컴포넌틍 인스턴스를 가리키는 함수 내부의 this 에 노출됩니다.
data
- Data 메서드는 해당 컴포넌트에서 사용될 state 즉, 데이터들을 관리해주는 곳입니다.
- data 에서 반환된 속성들을 반응적인 상태가 되어 this 에 노출됩니다.
methods
- Methods 는 속성 값을 변경하고, 업데이트할 수 있는 함수이며, 템플릿 내에서 이벤트 핸들러로 바인딩이 가능합니다.
- methods 에서 반환된 함수들은 data 에서 반환된 속성과 마찬가지로 this 에 노출됩니다.
LifeCycle
- 생명주기 훅( Lifecycle hooks )은 컴포넌트 생명주기의 여러 단계에서 호출됩니다.
Composition API
- import 해서 가져온 Vue.js 내장 API 함수들을 사용해 컴포넌트 로직을 정의하는 개발 스타일입니다.
- SFC 에서 컴포지션 API 는 일반적으로 <script setup> 과 함께 사용합니다.
ref, reactive
- 컴포지션 API 에서는 반응성 있는 데이터를 만들어줄 경우, ref 혹은 reactive 키워드를 통해 변수를 선언해줍니다.
const count = ref(0) => 초기값을 0 으로 설정
const obj = reactive({ name: "test", age: 30 })
methods
- 컴포지션 API 에서는 methods 라는 객체를 선언할 필요가 없기 때문에 함수를 그냥 만들어 사용하면 됩니다.
function increment(){ count.value++ }
ref 로 참조한 데이터에 접근할 경우에는 .value 로 접근합니다.
LifeCycle
- 생명주기 훅(Lifecycle hooks)은 컴포넌트 생명주기의 여러 단계에서 호출합니다.
Options API vs Composition API
때문에 두 가지 방법 중 하나를 선택해 개발을 진행할 수 있는데, 어떤 개발스타일이 더 좋고 나쁘고는 없습니다. 취향에 맞게 개발하면 되죠.
협업에 있어 옵션 API 의 코드가 가독성이 좋을 경우도 있었기 때문에 맡은 프로젝트에 따라 선택하는 것이 중요할 겁니다.