25. 전역 상태 관리(Global State Management)
1. 전역 상태 관리란?
전역 상태 관리(Global State Management)는 여러 페이지와 여러 컴포넌트에서 함께 사용하는 데이터를 한 곳에서 관리하는 방법입니다.
예를 들어
로그인 사용자
예약 목록
장바구니
다크모드
알림
등은 여러 화면에서 함께 사용됩니다.
2. 지역 상태(Local State)
지역 상태는
const [liked,setLiked]
=
useState(false);
처럼
한 컴포넌트 안에서만 사용하는 데이터입니다.
예)
좋아요 버튼
모달 열기
입력창 값
3. 전역 상태(Global State)
전역 상태는
Header
↓
Reservation
↓
Gallery
↓
Footer
모든 페이지에서 함께 사용하는 데이터입니다.
예)
로그인 사용자
예약 개수
회원 등급
4. Context의 한계
Context도 전역 데이터를 관리할 수 있습니다.
하지만
프로젝트가 커지면
UserContext
ThemeContext
LanguageContext
ReservationContext
NoticeContext
GalleryContext
처럼
Context가 많아져 관리가 어려워질 수 있습니다.
5. Zustand
최근 React 프로젝트에서 많이 사용하는 전역 상태 관리 라이브러리입니다.
특징
✔ 사용법이 간단
✔ 코드가 적음
✔ 학습이 쉬움
✔ 성능이 우수
6. Redux Toolkit
대규모 프로젝트에서 많이 사용하는 방식입니다.
특징
✔ 구조가 체계적
✔ 디버깅 지원
✔ 팀 프로젝트에 적합
✔ 기업 프로젝트에서 많이 사용
7. 동부산CC 예제
로그인
↓
User Store
↓
Header
↓
Reservation
↓
MyPage
↓
Footer
모든 페이지가
같은 데이터를 사용합니다.
8. 예약 목록
Reservation
↓
Store
↓
Header
↓
MyPage
예약 건수가
Header에서도 바로 표시됩니다.
9. 다크모드
Theme Store
↓
Header
↓
Footer
↓
Gallery
↓
Notice
한 번 변경하면
모든 페이지가 동시에 변경됩니다.
10. Store란?
Store는
전역 데이터를 저장하는 공간입니다.
Store
↓
회원정보
↓
예약정보
↓
다크모드
↓
알림
11. 데이터 흐름
Store
↓
Component
↓
Event
↓
Store 변경
↓
React 렌더링
12. Zustand 예시
Store
const useUserStore =
create(...);
컴포넌트
const user =
useUserStore(
state=>state.user
);
필요한 데이터만 가져와 사용할 수 있습니다.
13. Redux Toolkit 구조
Store
↓
Slice
↓
Action
↓
Reducer
↓
Component
규모가 큰 프로젝트에서 많이 사용하는 구조입니다.
14. 동부산CC Store 구조
User Store
Theme Store
Reservation Store
Notice Store
기능별로 분리하면 관리하기 쉽습니다.
15. 언제 사용할까?
작은 프로젝트
useState
중간 프로젝트
Context API
큰 프로젝트
Zustand
또는
Redux Toolkit
16. React 실행 흐름
Store
↓
Component
↓
Event
↓
Store 변경
↓
React 렌더링
↓
화면 변경
17. 동부산CC 적용
회원 로그인
↓
User Store
↓
Header
↓
Reservation
↓
MyPage
↓
Footer
회원 이름이
모든 페이지에 자동으로 반영됩니다.
18. 어떤 데이터를 전역으로 관리할까?
데이터 전역 상태
로그인 사용자 O
다크모드 O
언어 설정 O
예약 건수 O
입력창 값 X
모달 열림 X
좋아요 버튼 X
컴포넌트 안에서만 사용하는 데이터는 전역으로 관리하지 않는 것이 좋습니다.
19. Context와 Zustand 비교
Context API Zustand
React 기본 기능 외부 라이브러리
간단한 프로젝트 중대형 프로젝트
설정이 적음 성능이 좋고 사용이 간단
데이터 공유 전역 상태 관리에 특화
20. 정리
전역 상태 관리는 여러 컴포넌트에서 공통으로 사용하는 데이터를 하나의 Store에서 관리하는 방식입니다.
작은 프로젝트에서는 useState, 중간 규모에서는 Context API, 규모가 커질수록 Zustand나 Redux Toolkit을 사용하는 것이 일반적입니다.
동부산CC 프로젝트에서는 로그인 사용자, 다크모드, 예약 건수와 같은 공통 데이터를 전역 상태로 관리하면 컴포넌트 간 데이터 공유가 훨씬 쉬워지고 유지보수도 편리해집니다.
전역 상태는 정말 여러 화면에서 함께 사용하는 데이터만 관리하는 것이 좋은 설계입니다.
1. 전역 상태 관리란?
전역 상태 관리(Global State Management)는 여러 페이지와 여러 컴포넌트에서 함께 사용하는 데이터를 한 곳에서 관리하는 방법입니다.
예를 들어
로그인 사용자
예약 목록
장바구니
다크모드
알림
등은 여러 화면에서 함께 사용됩니다.
2. 지역 상태(Local State)
지역 상태는
const [liked,setLiked]
=
useState(false);
처럼
한 컴포넌트 안에서만 사용하는 데이터입니다.
예)
좋아요 버튼
모달 열기
입력창 값
3. 전역 상태(Global State)
전역 상태는
Header
↓
Reservation
↓
Gallery
↓
Footer
모든 페이지에서 함께 사용하는 데이터입니다.
예)
로그인 사용자
예약 개수
회원 등급
4. Context의 한계
Context도 전역 데이터를 관리할 수 있습니다.
하지만
프로젝트가 커지면
UserContext
ThemeContext
LanguageContext
ReservationContext
NoticeContext
GalleryContext
처럼
Context가 많아져 관리가 어려워질 수 있습니다.
5. Zustand
최근 React 프로젝트에서 많이 사용하는 전역 상태 관리 라이브러리입니다.
특징
✔ 사용법이 간단
✔ 코드가 적음
✔ 학습이 쉬움
✔ 성능이 우수
6. Redux Toolkit
대규모 프로젝트에서 많이 사용하는 방식입니다.
특징
✔ 구조가 체계적
✔ 디버깅 지원
✔ 팀 프로젝트에 적합
✔ 기업 프로젝트에서 많이 사용
7. 동부산CC 예제
로그인
↓
User Store
↓
Header
↓
Reservation
↓
MyPage
↓
Footer
모든 페이지가
같은 데이터를 사용합니다.
8. 예약 목록
Reservation
↓
Store
↓
Header
↓
MyPage
예약 건수가
Header에서도 바로 표시됩니다.
9. 다크모드
Theme Store
↓
Header
↓
Footer
↓
Gallery
↓
Notice
한 번 변경하면
모든 페이지가 동시에 변경됩니다.
10. Store란?
Store는
전역 데이터를 저장하는 공간입니다.
Store
↓
회원정보
↓
예약정보
↓
다크모드
↓
알림
11. 데이터 흐름
Store
↓
Component
↓
Event
↓
Store 변경
↓
React 렌더링
12. Zustand 예시
Store
const useUserStore =
create(...);
컴포넌트
const user =
useUserStore(
state=>state.user
);
필요한 데이터만 가져와 사용할 수 있습니다.
13. Redux Toolkit 구조
Store
↓
Slice
↓
Action
↓
Reducer
↓
Component
규모가 큰 프로젝트에서 많이 사용하는 구조입니다.
14. 동부산CC Store 구조
User Store
Theme Store
Reservation Store
Notice Store
기능별로 분리하면 관리하기 쉽습니다.
15. 언제 사용할까?
작은 프로젝트
useState
중간 프로젝트
Context API
큰 프로젝트
Zustand
또는
Redux Toolkit
16. React 실행 흐름
Store
↓
Component
↓
Event
↓
Store 변경
↓
React 렌더링
↓
화면 변경
17. 동부산CC 적용
회원 로그인
↓
User Store
↓
Header
↓
Reservation
↓
MyPage
↓
Footer
회원 이름이
모든 페이지에 자동으로 반영됩니다.
18. 어떤 데이터를 전역으로 관리할까?
데이터 전역 상태
로그인 사용자 O
다크모드 O
언어 설정 O
예약 건수 O
입력창 값 X
모달 열림 X
좋아요 버튼 X
컴포넌트 안에서만 사용하는 데이터는 전역으로 관리하지 않는 것이 좋습니다.
19. Context와 Zustand 비교
Context API Zustand
React 기본 기능 외부 라이브러리
간단한 프로젝트 중대형 프로젝트
설정이 적음 성능이 좋고 사용이 간단
데이터 공유 전역 상태 관리에 특화
20. 정리
전역 상태 관리는 여러 컴포넌트에서 공통으로 사용하는 데이터를 하나의 Store에서 관리하는 방식입니다.
작은 프로젝트에서는 useState, 중간 규모에서는 Context API, 규모가 커질수록 Zustand나 Redux Toolkit을 사용하는 것이 일반적입니다.
동부산CC 프로젝트에서는 로그인 사용자, 다크모드, 예약 건수와 같은 공통 데이터를 전역 상태로 관리하면 컴포넌트 간 데이터 공유가 훨씬 쉬워지고 유지보수도 편리해집니다.
전역 상태는 정말 여러 화면에서 함께 사용하는 데이터만 관리하는 것이 좋은 설계입니다.
#25. 전역 상태 관리(Global State Management)