728x90
Zustand를 활용한 효율적인 React 상태 관리
1강: Zustand 개요 및 설치
내용:
- Zustand 소개: 간단하고 유연한 상태 관리 라이브러리
- Zustand와 다른 상태 관리 도구 비교 (Redux, Recoil 등)
- 프로젝트에서 Zustand 설치 및 기본 설정
실습:
- Create React App으로 프로젝트 생성
- Zustand 설치 및 기본 설정
- 상태 저장소(store) 생성 및 기본 상태 관리
2강: 상태 관리의 기본 원리
내용:
- Zustand에서 상태 관리하는 방법: 상태 저장소(store)와 상태 변경
- useStore 훅을 사용한 상태 읽기 및 업데이트
실습:
- 상태 저장소에서 상태 정의 및 변경하는 예제
- 버튼 클릭 시 상태 업데이트 (Counter 컴포넌트 예제)
3강: 여러 컴포넌트 간 상태 공유
내용:
- Zustand를 사용한 컴포넌트 간 상태 공유
- 컴포넌트 간의 상태 전달 없이 Zustand로 상태 접근
실습:
- 여러 컴포넌트에서 Zustand 상태를 공유하는 예제 (Todo 리스트 구현)
4강: 비동기 작업과 Zustand
내용:
- 비동기 작업을 처리하기 위한 상태 관리
- Zustand에서 비동기 작업(fetch API 등) 다루기
실습:
- API 데이터를 Zustand로 관리하는 예제
- API 호출 후 상태 업데이트하여 데이터 렌더링
5강: 상태 리팩토링 및 모듈화
내용:
- 상태 관리 모듈화 및 코드 분리 전략
- 대형 프로젝트에서 상태 분리 및 구조화
실습:
- 상태를 모듈화하여 더 큰 프로젝트에서 사용 가능한 구조 만들기
- 다중 상태 저장소 구현
6강: Zustand 미들웨어 활용
내용:
- 미들웨어를 사용한 상태 관리 확장
- 상태 변화 로깅 및 디버깅 방법
실습:
- Zustand 미들웨어를 사용하여 로깅, 퍼시스턴스 구현
- 상태가 변경될 때마다 콘솔에 로깅
7강: Zustand와 React Suspense 연동
내용:
- React Suspense를 활용하여 비동기 데이터 처리
- Zustand와 Suspense를 결합한 상태 관리
실습:
- Suspense를 이용하여 데이터 로딩 상태 처리
- 비동기 데이터를 Zustand로 관리하고 Suspense와 함께 사용
8강: 상태 관리 성능 최적화
내용:
- Zustand에서의 상태 성능 최적화 기법
- 불필요한 상태 업데이트 방지
실습:
- 성능 최적화를 위한 Zustand의 selector 사용
- 상태 변경 시 선택적 리렌더링 구현
9강: 상태 지속성 관리 (Persist)
내용:
- Zustand로 상태를 로컬 스토리지에 저장하고 복구하는 방법
- Persist 미들웨어 사용법
실습:
- 상태를 로컬 스토리지에 저장하고 복원하는 예제
10강: 프로젝트 상태 관리 실습
내용:
- 프로젝트에서 상태 관리를 어떻게 적용할지 종합적으로 실습
- 다양한 상태 관리 기법을 활용하여 실제 프로젝트 구축
실습:
- 실무 프로젝트 예제를 통해 상태 관리 적용 및 최적화
이 강좌를 통해, 수강자는 Zustand를 사용하여 React 애플리케이션에서 상태 관리를 효율적으로 적용하고, 성능 최적화까지 고려한 상태 관리 기술을 익히게 됩니다.
728x90
'React > Zustand' 카테고리의 다른 글
| Zustand를 활용(5): 상태 리팩토링 및 모듈화 (2) | 2024.10.15 |
|---|---|
| Zustand를 활용(4): 여러 컴포넌트 간 상태 공유 (0) | 2024.10.15 |
| Zustand를 활용(3): 여러 컴포넌트 간 상태 공유 (0) | 2024.10.15 |
| Zustand를 활용(2): Zustand에서 상태 관리의 기본 원리 (0) | 2024.10.15 |
| Zustand를 활용(1): Zustand 개요 및 설치 (0) | 2024.10.15 |