81일차_day08: Redux

Redux

Redux와 React는 독립적인 별개의 다른 라이브러리

• 자바스크립트 어플리케이션에서 흔히 쓰이는 상태관리 라이브러리
• Angular, Vue, Ember, jQuery 또는 Vanilla JavaScript와 같은 다른 라이브러리, 프레임워크에서도 사용 가능

 

특징

• 컴포넌트들의 상태 관련 로직들을 다른 파일로 분리하여 효율적으로 관리
• 글로벌 상태 관리 용이
• 상태값을 컴포넌트에 종속 X & 상태 관리를 컴포넌트의 바깥에서 관리 가능

 

주요개념

store

• 모두 한 곳에서 집중 관리
• 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다.
• 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.

action

• Action(액션)은 앱에서 스토어에 운반할 데이터를 말한다. (주문서)
• Action(액션)은 자바스크립트 객체 형식으로 되어있다.

reducer

• Action(액션)을 Store(스토어)에 바로 전달하는 것이 아니다.
• Action(액션)을 Reducer에 전달해야한다.
• Reducer가 주문을 보고 Store의 상태를 업데이트하는 것이다.
• Action을 Reducer에 전달하기 위해서는 dispatch() 메소드를 사용해야 한다.

 

설치

https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko

Redux DevTools - Chrome 웹 스토어

 

day08

프로젝트 구조

 

 components 

컴포넌트 정의

 

 

 

 

 

 store 

/modules: reducer 정의

/Coffee: reducer 정의

/index.jsx: 리듀서와 컴포넌트의 연결 역할

 

 

 

 

 

 

 

 

Color

RED 버튼을 클릭했을 때의 흐름

dispatch는 특정 액션에 의해 상태변수의 값이 변경된다. 

1. RED 버튼 클릭
2. action 객체 생성
3. 리듀서에서 해당 action 객체에 의해 상태변수의 값을 변경
4. 상태변수 반환

 

전체적인 흐름

여기서 index.jsx는 리듀서와 컴포넌트를 연결하는 중간 다리 역할을 한다. 

 

 Reducer 변수: color 

 Reducer 정의: color.jsx 

 Reducer가 가지고 있는 상태변수: colorRd 

 

결과 화면

상태변수가 리더스 함수의 switch 문에 의해 변경된다. 

 

 

지정한 액션명이 출력되는것을 볼 수 있음. 

 

 

Count

 

액션명

 

 

Animal

결과 화면

 

상태 변수 값

 

 

Coffee

input 태그의 값이 변할 때, 리듀서에 등록되어 있는 함수 호출 

• americano
• latte
• moca

button를 클릭할 때, 리듀서에 등록되어 있는 함수 호출 

• order
• reset