안녕하세요! 프론트엔드 개발의 세계로 오신 것을 환영합니다.
오늘은 Zustand 공식 문서 중에서도 구조를 어떻게 잡아야 할지 고민하는 분들에게 아주 유용한 파트인 '스토어 외부에 액션 분리하기'에 대해 함께 살펴볼 거예요. 공식 문서의 내용을 하나도 빠짐없이, 하지만 여러분이 이해하기 쉽도록 아주 친절한 구어체로 풀어서 번역해 드리고, 제 실무 경험을 듬뿍 담은 꿀팁도 중간중간 보충해 드릴게요! 자, 그럼 시작해볼까요?
스토어 액션 없이 연습하기 (Practice with no store actions)
가장 권장되는 Zustand의 기본 사용법은 액션(상태를 업데이트하는 함수)과 상태(State)를 스토어(store) 내부에 함께 배치하는 거예요 (여러분의 액션들이 상태와 같은 위치에 있도록 하는 거죠).
👨🏫 강사의 보충 설명:
우리가 보통 상태 관리 라이브러리를 처음 배울 때 가장 익숙하게 사용하는 방식입니다. 마치 객체 지향 프로그래밍에서 하나의 클래스 안에 변수(상태)와 메서드(액션)를 같이 묶어두는 것과 같은 원리라고 생각하시면 이해하기 쉬우실 거예요!
예를 들면 다음과 같습니다:
export const useBoundStore = create((set) => ({
count: 0,
text: 'hello',
inc: () => set((state) => ({ count: state.count + 1 })),
setText: (text) => set({ text }),
}))이 코드는 데이터와 액션이 함께 묶여 있는, 스스로 완전하게 동작하는 독립적인 스토어(self-contained store)를 만들어 냅니다.
하지만 이를 대체할 수 있는 또 다른 방법이 있어요! 바로 스토어 내부가 아닌, 스토어 외부의 모듈 레벨(module level)에서 액션을 정의하는 접근법입니다.
👨🏫 강사의 보충 설명:
위 다이어그램에서 상상할 수 있듯이, 스토어 안에는 오직 '데이터(상태)'만 남겨두고, 이 데이터를 조작하는 '기능(액션)'들은 스토어 바깥으로 빼서 별도의 함수로 선언하는 패턴이에요. 코드로 어떻게 구현하는지 바로 확인해볼까요?
export const useBoundStore = create(() => ({
count: 0,
text: 'hello',
}))
export const inc = () =>
useBoundStore.setState((state) => ({ count: state.count + 1 }))
export const setText = (text) => useBoundStore.setState({ text })이러한 방식에는 아주 매력적인 몇 가지 장점들이 있습니다:
- 액션을 호출할 때 훅(hook)을 요구하지 않아요.
💡 강사의 팁: 보통 리액트 컴포넌트 안에서 액션을 쓰려면
const inc = useBoundStore((state) => state.inc)처럼 매번 훅을 호출해서 꺼내와야 하죠? 하지만 모듈 레벨에서 정의하면, 컴포넌트 바깥(일반 자바스크립트/타입스크립트 파일)이나 이벤트 핸들러 안에서 단순히inc()함수를 임포트해서 실행하기만 하면 끝이에요! 코드가 훨씬 간결해집니다. - 코드 스플리팅(code splitting)을 하기가 훨씬 수월해집니다.
💡 강사의 팁: 앱이 커지고 상태가 많아지면 스토어 파일 하나가 엄청나게 길어질 수 있어요. 이때 액션들을 스토어 바깥으로 빼두면, 도메인별로 액션 파일들만 따로 분리해서 관리하기가 너무 좋아져요. 결과적으로 초기 번들 사이즈를 줄이는 최적화 과정에서도 큰 이점을 얻을 수 있습니다.
이 패턴은 사실상 단점이라고 부를 만한 것이 전혀 없습니다. 다만, 상태와 액션이 완벽하게 하나의 단위로 캡슐화(encapsulated)되어 있는 구조적인 안정감을 선호하시는 분들이라면 여전히 첫 번째 방식(스토어 내부에 함께 두는 것)을 더 좋아하실 수도 있습니다.
👨🏫 강사의 최종 조언:
정답은 없습니다! 여러분의 팀 컨벤션과 프로젝트의 규모에 맞게 선택하시면 돼요. 작은 프로젝트나 간단한 상태라면 첫 번째 방식을, 전역 상태의 덩치가 커지고 로직이 복잡해지는 대규모 프로젝트라면 지금 배운 두 번째 '모듈 레벨 액션' 방식을 적극적으로 고려해 보시는 것을 강력히 추천합니다!
이전 글 (Previous)
Updating state
다음 글 (Next)
Slices Pattern
