FSD 상태관리 배치 전략: 전역 상태를 어디에 두고 어디까지 분리할 것인가

FSD 상태관리 배치 전략: 전역 상태를 어디에 두고 어디까지 분리할 것인가

상태관리 복잡도는 기능 확장 속도를 직접 좌우한다. FSD에서는 상태를 레이어 책임에 맞춰 배치해 전역 오염과 과도한 결합을 방지한다. 검색 유입이 많은 키워드(폴더 구조, 마이그레이션, 안티패턴, 상태관리)를 기준으로 실무 적용 포인트를 정리했다.

FSD 공식 사이트 참조 이미지 (출처: feature-sliced.design)

핵심 개념

실무에서 먼저 결정할 기준

이 주제는 코드 배치 기준을 먼저 정하고, 이후 네이밍과 import 경계를 린트로 고정하는 순서가 가장 안정적이다.

핵심 요소 3~6개

항목	의미	언제 쓰는지(실무 상황)
app state	전역 테마/세션/초기 설정	앱 전반에 공통으로 필요한 상태를 관리할 때
feature state	특정 사용자 액션 상태	폼 제출, 모달 열림, 검색 필터를 제어할 때
entity state	도메인 모델 중심 상태	상품/유저 등 핵심 모델 캐싱을 관리할 때
shared/lib	재사용 훅/유틸	상태 라이브러리 래퍼를 공통화할 때
server cache	원격 데이터 캐시	React Query/SWR로 API 상태를 일관되게 다룰 때

예시 코드

features/profile/edit/model/use-profile-form.ts
entities/user/model/user-store.ts
app/providers/query-client-provider.tsx

문제 상황 1개

상황: 작은 기능 수정이 전역 store에 영향을 주어 사이드 이펙트가 자주 발생한다.
원인: 로컬 기능 상태와 전역 상태를 구분하지 않고 한 store에 몰아넣었다.
해결: 기능 상태는 features/model로 이동하고, 전역 상태는 app/entities 수준으로 축소한다.
예방 팁: 새 상태 추가 시 범위를 local/feature/global 중 하나로 먼저 선언한다.

참고/출처

공식 문서: FSD Layers Reference
공식 문서: TanStack Query Docs
신뢰 자료: Redux Style Guide