vue 입문 Level01
vue의 기본 구조
SPA와 Router
Vue 기반 애플리케이션은 흔히 SPA(Single Page Application, 한 화면으로 구성된 애플리케이션을 말한다)로 구성되는데, 이때 한 페이지 내에서도 다른 페이지로 이동할 필요 없이 마치 여러 개의 페이지가 있는 듯한 방식으로 작동하게 해 주는 것이 바로 Vue Router이다.
이는 보통 사이트의 큰 틀 안에 <router-view> 태그를 삽입하고, 라우터가 보여 줄 컴포넌트를 이 태그 안에 렌더링한다. 라우터가 보여 줄 컴포넌트는 <router-link>의 클릭이나 JS 함수 호출 등으로 변경할 수 있다.
간단한 예를 들어보자면 블로그를 만들 때 MainPage 컴포넌트와 Profile 컴포넌트, Posts 컴포넌트를 만든 후, 각각 컴포넌트로의 링크를 담은 <router-link>를 내비게이션 바에 넣어 놓고, 그 아래에 <router-view>를 놓으면 내비게이션 바에서 링크를 누르는 대로 보여지는 컴포넌트가 바뀌면서 마치 일반적인 여러 페이지로 구성된 블로그와 같이 작동하게 된다.
하지만 실제로는 페이지를 이동하지 않기 때문에 로딩 시간도 훨씬 적고, 화면이 사라졌다 다시 나타나는 지저분한 효과 없이 즉시 화면이 전환된다. 원한다면 애니메이션을 넣는 것도 가능하다
상태 관리
Vue 컴포넌트들 간의 데이터 공유를 도와주는 라이브러리들이다.
Vue기능만으로 컴포넌트 간에 데이터를 공유하려면 상위 컴포넌트에서 하위 컴포넌트로 Property를 넘기거나, 하위에서 상위 컴포넌트로 이벤트를 송신하는 방법이 있는데,
이 방식을 사용하면 해당 컴포넌트에서 멀리 떨어진 컴포넌트까지 데이터를 공유하려고 할 때 상당히 골치가 아파진다. 그래서 아래와 같은 라이브러리가 개발되어 데이터 공유및 상태 저장을 간결하고 쉽게 만들 수 있게 되었다.
vuex: 예전에 사용되던 라이브러리. Vuex는 중앙화된 Store 안에 state를 통해 애플리케이션의 상태를 관리힌다. 중앙화된 store 속 데이터는 컴포넌트 어디서나 자유롭게 읽을 수 있으며, Store 안에 등록할 수 있는 동기적 함수인 Mutation을 통해 데이터를 변경할 수 있다. Vuex를 사용함으로써 얻을 수 있는 편의성이 매우 크기에, 좀 규모가 되는 Vue 애플리케이션을 작성할 때 없어서는 안 되는 물건이었으나 Pinia로 대체되고 있다.pinia: 기존 사용되더누아리의 Vuex를 대체하는 신규 라이브러리. 상대적으로 간결한 문법과 뛰어난 TypeScript 지원을 내세운 Pinia가 등장하여 공식적으로 권장되는 상태 관리 라이브러리로 지정되었고, 예전의Vuex는 유지보수 단계에 진입한 상태이다. 따라서 신규 프로젝트 개발 시에는 Pinia의 사용이 권장된다