Vue3, Composition API와 Pinia를 활용한 상태 관리 (2)

인재풀 서비스의 검색 필터는 경력, 지역, 직무, 학력, 연봉 등 17개 항목으로 구성돼 있어 상태와 데이터 변경이 매우 빈번했다. 단일 컴포넌트로 관리하면 복잡도가 커지기 때문에, 상위 Filter 아래에 항목별 자식 컴포넌트를 두고 공통 필터 데이터를 Pinia로 관리했다.

스토어는 Composition API와 잘 맞는 setup store 방식으로 정의했다. conditions를 ref로 두고, getFilters를 computed로 노출하며, updateFilters, resetFilters 같은 actions를 분리해 각 컴포넌트가 같은 상태를 읽고 쓰도록 구성했다.

경력 필터처럼 개별 컴포넌트에서는 storeToRefs로 스토어 상태를 가져와 v-model로 양방향 바인딩했다. 사용자가 조건을 바꾸면 스토어의 공통 상태가 바뀌고, 그 변경은 결과 리스트 화면의 watch에서 deep 감지돼 검색 API 재호출로 이어졌다.

이 방식 덕분에 서로 다른 컴포넌트가 같은 필터 상태를 공유하면서도, 상태 변경과 리스트 갱신 흐름을 단순하게 유지할 수 있었다. 복잡한 중첩 데이터를 다루는 화면에서 상태 관리 라이브러리의 장점이 분명하게 드러났다.

실무 경험을 바탕으로 한 설문에서는 작업자 대다수가 Vue3에 적응하는 데 큰 어려움이 없었고, Composition API가 Options API보다 낫다고 답한 비율도 높았다. Pinia는 Vuex보다 쉽고 직관적이라는 평가가 많았지만, TypeScript를 쓰지 못한 점과 Vue3 학습 초기의 부담, 그리고 Composition API와 Options API가 혼재된 코드 스타일은 개선점으로 지적됐다.

개인적으로는 Vue2 기반 서비스만 다루다가 처음 Vue3를 적용한 프로젝트였던 만큼, Pinia의 함수 기반 구조와 직관적인 코드가 협업과 유지보수에 더 잘 맞는다고 느꼈다. 특히 상태 관리와 컴포넌트 책임이 분리되면서 작업 파악이 쉬워졌고, 앞으로는 Teleport 같은 Vue3 기능까지 포함해 더 효율적인 구조를 다뤄볼 여지가 남았다.