[리액트] Redux

 

 

1. Redux?

• 리액트 전역 상태 관리 라이브러리
• 여러개의 컴포넌트가 개별적으로 관리하는 상태값들을 하나의 파일에 모아서 통합 관리하는 것이 목적
• 컴포넌트끼리 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있다.
• React나 다른 뷰 라이브러리와 함께 사용할 수 있다.

 

 

 

 

 

 

---

 

 

 

 

 

 

2. Redux 기본 요소

 

 

 

 

 

Slice 

리덕스에서 관리하고자 하는 상태값과 상태값 갱신 기능을 포함하는 단위 모듈

1. 상태값 - 리덕스를 통해 관리하고자 하는 전역 상태값
2. 리듀서 - 상태값을 갱신하기 위한 함수(=액션함수)들을 포함하고 있는 모듈
3. 액션함수 - 리듀서에 포함된 메서드들로서 상태값을 갱신하는 역할을 수행한다.

 

 

Store 

Slice를 저장하고 있는 통합 모듈

이 모듈을 ReactApp의 메인(index.js)에 연결하여 모든 하위 컴포넌트들이 Redux가 관리하는 상태값을 구독할 수 있도록 한다.

 

 

 

 

Component

리액트에서 화면을 구성하는 요소(지금까지 사용해온 컴포넌트를 의미)

1. 구독 - 컴포넌트에서 리덕스 내의 상태값이 변경되었음을 감지하는 기능
2. 디스패치 - 리덕스의 액션함수를 호출하는 기능

 

 

 

 

 

 

---

 

 

 

 

 

 

3. Redux 미들웨어

액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 실행되는 사전에 지정된 작업들

 

 

 

 

미들웨어로 수행하는 처리들

react-toolkit에는 redux-thunk라는 미들웨어가 기본 탑재되어 있으며 이를 통해 비동기 처리를 지원한다.

• 전달받은 액션을 단순히 콘솔에 기록
• 전달받은 액션 정보를 기반으로 액션을 아예 취소
• 다른 종류의 액션을 추가로 디스패치
• 비동기 액션 처리 등

 

 

 

 

동작 순서

사용자 이벤트 ➡ 액션함수 디스패치 ➡ 미들웨어 자동실행 ➡ 리듀서의 액션함수 실행됨 ➡ 액션값이 갱신됨