「Redux」 입문하기

▪ Redux? 

상태관리 라이브러리로

웹 규모가 커지면서 관리해야 할 상태들이 많아졌고

 어떤 컴포넌트에서 언제 , 어떻게 , 왜 상태를 변경했는지

파악하기 위해 만들어졌다

 

---

▪ Redux 장점

 

전역 상태관리를 통한 로직 간소화

 

Time Travel을 통한 시간 여행(쉬운 디버깅)

 

원본 데이터 무결성 유지

 

예측 가능성 ( 모든 상태 변화가 액션을 통해 이루어지기 때문)

 

 

---

 

▪ 수많은 상태관리 라이브러리 중

Redux를 고른 이유❗❗

 

React와 궁합이 잘맞고

가장 오래된 라이브러리로써 Redux를 잘 이해하고 다루면

다른 라이브러리도 쉽게 사용할 수 있을 것이라고 생각했기 때문!!

출처 : NPM Trends 아직까지도 가장 많이 사용 중

 

---

▪ 구성 요소

 

• Store : Redux State(데이터)들을 저장하기 위한 저장소
• State : Store에 저장되어 있는 데이터
• Action : 저장된 State(데이터)에 변화를 주는 행동
• Action Creator : Action 객체를 생성
• Reducer : Action을 기반으로 State에 변화를 주는 역할

• dispatch : Action을 발송하는 역할

 

만약 쇼핑앱이 있다고 한다면

 

state : 쇼핑 정보(장바구니, 구매내역 등등)가 담겨 있음
store : 모든 정보들을 통합해서 저장
Action : 기능들 (장바구니, 구매 등등) 
Action Crator : 기능에 필요한 데이터가 담겨 있음
Reducer : 기능에 맞게 state에 변화를 주는 역할
dispatch : 특정 기능이 발생했다고 Store에 알림

 

로 비유 가능

 

---

▪ Data Flow

 

1.Action => 2.Dispatch => 3.Store => 

4.Reducer => 5.State => 6. 화면 반영

 

1. 장바구니 사용 

2. 장바구니에 상품이 담겼다고 store에 알림

3. 장바구니에 상품을 담는다고 알림

4.  장바구니에 상품이 담김

5. 장바구니에 상품을 추가하여 정보 수정

6. 화면에 반영 (장바구니에 삼품이 담김)