[React] Redux 상태관리 기초

Redux 란?

Redux is a predictable state container for JavaScript applications.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

=> Redux는 자바스크립트 애플리케이션에서 예측 가능한 상태 관리를 해주는 container 이다.

 

state 란?

React에서 State는 Class component 안에서 관리

 

Component 간의 정보 공유

형제 컴포넌트들 간에 데이터를 주고받을 때, 부모 컴포넌트를 통해서 주고 받을 수 있다.

(자식 간에 다이렉트로 정보 전달은 불가능!!)

상태 관리 라이브러리 Redux의 기본 개념 : 세 가지 원칙

1. Single source of truth  =>  동일한 데이터는 항상 같은 곳에서 데이터를 가지고 오는 것(store)
2. State is read-only  =>  action이라는 객체를 통해 state 값 변경(action)
3. Changes are made with pure functions => 변경은 순수 함수로 가능함(reducer)

 

Redux의 기본 개념 : Store

상태가 관리되는 오직 하나의 공간

 

Redux의 기본 개념 : Action

tpye을 비롯한 다양한 정보가 담긴 JavaScript 객체 => 애플리케이션의 정보를 store로 운반해주는 역할

 

Redux의 기본 개념 : Reducer

현재 상태와 Action을 이용해 다음 상태를 만들어 냄

 

Redux의 기본 개념 Overview

Redux의 장점

1. 상태를 예측 가능하게 만들어 준다. => Reducer은 순수 함수이기 때문에 다음 상태가 어떻게 될지 쉽게 예측 가능
2. 유지보수가 용이하다. => lifting stateup(State 끌어올리기), props drilling 방지
3. 디버깅에 유리하다. (action과 state log 기록 시)
4. 테스트를 붙이기 쉽다.