Vue.js는 선언적인 화면 표현과 반응형 상태를 연결하는 사용자 인터페이스 프레임워크이다. 컴포넌트 단위로 화면을 구성하며, 이 문서는 Vue 3의 반응형 API를 기준으로 설명한다.
분야 | 반응형 사용자 인터페이스 프레임워크 |
|---|
반응형 상태
Composition API에서는 ref로 값을 감싸 반응형 상태를 표현할 수 있다. 자바스크립트 코드에서는 일반적으로 .value를 통해 ref의 값에 접근한다. reactive는 객체를 프록시로 감싸 속성 접근과 변경을 추적하는 방식이다.
프록시와 원본 객체는 같은 객체가 아니다. 반응형 프록시가 아닌 원본을 직접 변경하면 기대한 화면 갱신이 일어나지 않을 수 있으므로 상태를 어느 경로로 읽고 쓰는지 일관되게 유지한다. ref의 자동 해제도 모든 자바스크립트 문맥에서 무조건 적용되는 규칙은 아니다.
computed와 파생 값
computed는 다른 반응형 값에서 계산한 결과를 표현한다. 반응형 의존성을 추적하고 그 의존성이 바뀌지 않으면 계산 결과를 재사용한다. 예를 들어 장바구니 항목의 금액과 수량에서 합계를 계산하면 원본 항목과 합계를 각각 독립 상태로 동기화하는 부담을 줄일 수 있다.
computed에 넣었다고 모든 외부 값이 자동으로 추적되지는 않는다. 공식 문서는 Date.now처럼 반응형 의존성이 아닌 값을 예로 든다. 계산 결과를 얻는 작업과 외부 시스템을 변경하는 부수 효과를 분리해 설계한다.
DOM 갱신 시점
반응형 상태 변경과 DOM 반영은 항상 같은 순간에 끝나지 않는다. Vue는 변경을 모아 갱신할 수 있으며, 변경 후 실제 DOM 반영을 기다려야 하는 경우 nextTick을 사용할 수 있다. 단순한 값 계산에까지 DOM 반영 대기를 섞을 필요는 없다.
컴포넌트와 생태계
단일 파일 컴포넌트는 화면 구조, 동작과 스타일을 한 구성 단위로 표현하는 방식이다. 라우팅과 애플리케이션 전체의 상태 관리는 필요에 따라 관련 도구를 함께 사용한다. Vue.js, Vue Router, Pinia와 Nuxt는 관련되어 있지만 서로 같은 프로젝트는 아니므로 독립적으로 설명한다.
함께 읽기
참고 자료