리액트 React | Redux

 

 

⭕ 리액트 React | Redux 

• JavaScript 앱을 위한 예측 가능한 상태 컨테이너
• 애플리케이션의 상태 관리를 효율적이고 일관된 방식으로 수행할 수 있음
• 상태 관리의 복잡성을 줄이고, 애플리케이션의 동작을 더 예측 가능하도록 함

 

➡️ Redux 3가지 원칙

• 단일 진실의 원천(Single Source of Truth): 애플리케이션의 전체 상태는 하나의 객체 트리 스토어(store)로 저장됨, 애플리케이션 내 어디서든 같은 상태에 접근할 수 있음
• 상태는 읽기 전용(States Are Read-Only): 상태를 변경할 수 있는 유일한 방법은 액션(action)을 발생하는 것
• 변화는 순수 함수에 의해 이루어진다(Changes Are Made with Pure Functions): 상태 변화는 리듀서(reducer)라고 하는 순수 함수를 통해 이루어짐, 함수는 이전 상태와 액션을 받아 새로운 상태를 반환함

 

⭕ Redux 주요 구성 요소

 

➡️ Action

• 상태에 변화를 일으키고자 할 때 발송하는 객체
• type 필드: 액션이 어떤 종류의 변화를 일으키고자 하는지를 설명함
• payload 필드: 액션에 필요한 추가 데이터를 전달함

 

➡️ Middleware

• 액션을 발송한 후, 상태가 업데이트되기 전에 실행되는 함수들의 체인임
• 액션을 가로채서 로그를 남기거나, 비동기 작업을 처리하거나, 다른 액션을 발송하는 등의 부가적인 작업을 수행함
• 비동기 작업을 관리하기 위해 사용되는 미들웨어: Redux Saga, Redux Thun

 

➡️ Reducer

• 애플리케이션 상태의 변화를 담당하는 순수 함수
• 이전 상태와 액션을 받아, 그에 기반한 새로운 상태를 반환함
• type에 따라 다양한 처리를 함으로써, 애플리케이션의 상태를 관리함
• combineReducers() 함수: 여러 리듀서를 하나로 합쳐서 사용할 수 있음

 

➡️ Store: Single Source of Truth

• Redux 애플리케이션의 상태를 포함하는 객체
• 애플리케이션의 상태를 접근하고 수정하기 위한 API를 제공함
• configureStore() 함수: 스토어 생성을 진행함