📌 오늘은 새로운 개념이라기 보단, Zustand 첫 글에서 자세히 다루지 않았던 내용에 대해서 정확히 알고 넘어가는 글이다. 학습하면서 자세하게 모르고 있었던 개념을 정리해보았다.
Selector
Selector란?
Selector 함수는 주로 상태 관리 패턴에서 필요한 데이터를 뽑아오거나 가공하기 위해 사용하는 함수이다.
Zustand에서 Selector를 사용하여 Store에서 데이터를 받아오는 방법은 두 가지가 있다.
const { user } = userInfoStore(); // 구조 분해 할당
const user = userInfoStore((state) => state.user); // Selector 함수이렇게 상태 값을 받아오는 두 문법이 있는데, 처음엔 구조 분해 할당으로 사용하는 것이 더 간결해보여 첫번째 코드처럼 상태를 받아왔었다.
하지만 구조 분해 할당 문법으로 받아오게 되면, Store 내부에 속성이 변경될 경우 해당 Store를 구독하고 있는 컴포넌트는 모두 불필요한 리렌더링이 발생한다는 것을 알게 되었다.
Selector 함수를 사용하여 함수 내부에 콜백을 통해 필요한 상태만 선택적으로 가져올 수 있고, 상태 업데이트에 따라 리렌더링을 최적화 할 수 있다고 한다. (권장되는 문법)
괜히 공식 문서에서 Selector 형식을 사용한게 아니었다.. 😹
파생 상태
파생 상태란?
Selector 함수를 통해 생성되는 상태를 뜻한다.
- Selector 함수를 통해 상태를 변경 / 새로운 값 계산 / 가공된 값을 반환할 수 있다.
- 원본 상태와 파생 상태는 서로 독립적으로 관리된다.
파생 상태를 사용하는 예제
const userAgeDoubleSelector = (state: { user: { age: number } }) =>
state.user.age * 2;
const userAgeDouble = userInfoStore(userAgeDoubleSelector);
console.log(userAgeDouble); // 원본 age: 20, 출력: 40위 예제처럼 파생 상태를 생성할 수 있다. 다른 컴포넌트에서 Store를 사용할 때는 해당 파생 상태가 영향을 주지 않는다.
파생 상태를 활용하면 컴포넌트가 필요한 상태에 집중할 수 있으며, 상태의 변경에 따라 필요한 부분만 업데이트되어 렌더링 최적화의 장점도 있다.
마치며
이렇게 Zustand에서의 Selector와 파생 상태에 대해 알아보았다.
알고 있다고 생각하는 지식에 대해 스스로에게 질문하고, 계속 찾아보며 성장해나가는게 중요한 것 같다. 다음 글에서는 미들웨어에 대해서 알아보겠다. 👍
참고 문서
