[멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_89일차_"프론트엔드 상태관리"

🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁
TIL 회고 - [89]일차

🚀89일차 회고에는 프론트엔드에서 리액트의 상태관리에 대한 도구 개념을 학습해보았다.

학습 목표 : 프론트엔드의 상태관리 시 사용할 수 있는 솔루션을 알게되는 것

학습 과정 : 회고를 통해 작성

---

리액트 상태관리

• 프론트엔드의 상태 : 렌더에 관련된 값
• 리액트는 독립적인 컴포넌트 단위로 구성되어있어서
• useState hook을 사용하여 하나의 컴포넌트에서 상태를 관리하고 props를 통해 부모-자식 간에 상태를 전파함

 

상태관리 툴을 사용해 효율적으로 상태 관리가 가능

• 상태관리를 위한 툴로는 Context API, Redux, React Query, Zustand 등

---

Zustand

• Zustand란 상태라는 뜻을 가진 독일어
• 단순화된 Flux 원리를 사용
• 작고 빠르며 확장 가능한 상태 관리 솔루션
• Hooks에 기반해 편리한 API를 제공
• 장점 :
  - 상태가 변경되면 불필요한 리렌더링을 일으키지 않음
  - 보일러플레이트(=최소한의 변경으로 여러 곳에서 재사용)이 거의 없다.

---

Redux

• JavaScript 앱의 상태를 중앙에서 관리할 수 있게 도와주는 전역 상태 관리 라이브러리
• 주로 React와 함께 사용
• 컴포넌트 간에 상태를 공유 기능
• 복잡한 앱에서 상태 추적이 어려울때 사용

Redux는 단방향의 데이터 흐름

[ UI ]
   ↓  dispatch(action)
[ Action ]
   ↓
[ Reducer ]
   ↓
[ Store (전역 상태) ]
   ↓
[ UI 업데이트 ]

• Store : 전역 상태가 저장되는 공간
• Action : 상태에 어떤 일이 일어났는지 설명하는 객체
• Reducer : Action에 따라 상태를 어떻게 바꿀지 결정하는 순수 함수
• Dispatch : Action을 발생시키는 함수
• Selector : 상태에서 필요한 값을 꺼내는 함수 

---

전역 스토어

• Redux, Zustand 모두 "전역 스토어"를 만들기 위한 도구
• 앱 전체에서 공유되는 데이터 저장소를 의미
• React의 Context API로도 구현 가능하지만, 복잡도가 커지면 Redux나 Zustand 같은 전문 도구를 사용

---

❓ Zustand vs Redux

	Zustand	Redux
작은 프로젝트	적합	무리가 있음
빠른 개발	빠름	설정이 많이 필요
상태 추적, 디버깅	부족한 기능	강력한 기능
대규모, 팀 협업	제한적임	정형화 되어있음

---

🚀회고 결과 :

Next.js 프론트엔드 프로젝트를 진행하면서 리액트 상태관리에 대해서도 학습할 수 있는 기회였다.

Zustand와 Redux, 전역스토어와 같은 개념을 회고를 통해 정리할 수 있었다.

향후 계획 : 

- 프론트엔드 프로젝트에 상태관리 적용