UI 상태 관리
목차
서론
항해 99에서 매주 주제를 받고 답하는 형식의 챌린지를 진행하고 있다. 25.04.09의 주제는 ‘UI 상태관리’이다. 내 답변을 작성한 뒤 항해99에서 제공해준 모범답안을 본 뒤 잘 몰랐던 부분이 있어서 Chat Gpt로 검색한 뒤 현재 사용하고 있는 Vue3프로젝트에서는 어떻게 도입할 수 있는지 알아봤다.
항해 99 질문 : U 상태 관리에서 어려움을 겪었던 경험이 있다 면, 어떤 방식으로 구조를 개선하거나 상태를 관 리했는지 설명해 주세요. 그 과정에서 적용한 성 능 최적화 기법이나 고민한 점이 있다면 함께 설 명해 주세요.
내 답변
Vue 유저로 Vue2에서는 vuex, vue3에서는 pinia를 사용합니다. 두 개의 역할은 동일하며, 전역적인 상태를 관리해주는 도구입니다. 이것들은 store라고 불립니다.
컴포넌트 간에 상태뿐만 아니라 상태에 대한 여러 로직이 필요할 경우 store를 사용합니다. 컴포넌트 내부에서 상태를 관리하려면 computed키워드를 사용합니다. 만약 컴포넌트 간에 상태만 주고 받고 싶다면 props/emit, provide/inject, v-model/defineModel 을 사용합니다.
props/emit는 부모 자식 간 컴포넌트에 대해 데이터를 전송합니다. provide/inject는 컴포넌트 깊이에 상관없이 데이터를 단방향으로 전송합니다. v-model/defineModel 은 컴포넌트 깊이에 상관없이 양방항 데이터를 바인딩합니다.
각 기능 별로 역할이 뚜렷하기 때문에 코드를 한눈에 이해하기 위해서는 각 기능을 잘 이해하고 사용해야 합니다.
모범 답변
내부 어드민 시스템에서 유저 검색/필터/페이징 상태를 관리하던 중, 렌더링 최적화 문제가 발생 했습니다. 각 컴포넌트가 서로 의존성이 많아 불 필요한 리렌더링이 생겼기 때문입니다. 이를 해 결하기 위해 zustand를 도입해 전역 상태를 분 리하고, selector를 활용한 부분 구독 방식으로 성능을 개선했습니다. 리렌더링 횟수가 60% 이 상 감소했고, 코드 유지보수성도 크게 개선되었 습니다.
궁금했던 키워드
부분 구독, 검색 또는 필터 상태와 렌더링 문제
알게 된 사실
상위 컴포넌트에 상태를 정의하면 상하위 컴포넌트 변경 시 전체 리렌더링된다. 상위 컴포넌트에 상태가 있으면, 그 상태를 v-model로 연결한 하위 컴포넌트가 값을 바꿀 때, 상위 컴포넌트의 반응형 상태가 변경되므로 상위 컴포넌트와 관련된 모든 템플릿 부분이 재렌더링됩니다.
storeToRefs()는 Pinia store 속성을 반응형 ref로 추출해, 부분 구독과 컴포넌트 최적화에 도움을 줍니다.
각 컴포넌트는 자신이 필요한 상태만 구독하므로, 예를 들어 currentPage가 변경되어도 SearchInput은 리렌더링되지 않음
해보고 싶은 것
최적화 전과 후 성능 테스트
참고