0. 시작하기 전에

0-Ⅰ. 리덕스란?

전역상태저장소(전역데이터저장소)로 스토어와 리듀서가 포함된다. 자식이 부모의 데이터를 관여하는 경우를 방지하기 위해 사용한다. 부모와 자식 어느곳에도 속하지 않는 별도의 전역상태저장소를 생성해서 그곳의 데이터를 부모와 자식이 사용하는 방식이다. props drilling을 방지하기 위해서도 쓰인다. Redux 이외에도 다양한 상태관리 라이브러리가 존재한다.

0-Ⅱ. 전역상태관리 흐름

➊ 전역으로 누구나 볼 수 있는 데이터가 존재
➋ 그 중에는 데이터를 참조하고 싶어하는 컴포넌트가 존재
➌ ➋중에서 그 데이터를 수정하고자 하는 컴포넌트가 존재
➍ 바뀐 값을 모두가 보게 해준다.

리덕스 뿐만 아니라 모든 라이브러리에서 동일!

1. 리덕스 설치

yarn add redux react-redux 

redux와 react-redux 패키지를 동시에 설치하는 명령어다. 이처럼 여러개의 패키지를 동시에 설치할 땐 yarn package_name을 여러번 입력하지 않고 띄어쓰기로 패키지 이름을 구분해서 설치하면 더 간단하다.

redux는 react 뿐만 아니라 다른 프론트엔트 프레임워크 라이브러리에서 사용 가능하다.

📌 공식문서

2. 리덕스 상태 관리 흐름

2-Ⅰ. 구독

컴포넌트가 스토어에서 데이터를 받아가는 행위

State
리덕스에서 저장하고 있는 상태값, 즉 데이터를 의미한다. 딕셔너리 형태 ({[key]: value})로 보관한다.

2-Ⅱ. 액션-디스패치

데이터 수정 요청 알림. '액션을 디스패치하다', '액션을 일으키다'라고 표현하기도 한다.

Action
무엇을 어떻게 바꾸는지에 관한 객체.
ex) {type: 'CHANGE_STATE', date: {...}} => CHANGE_STATE를 {...}로 바꿈
스테이트는 오직 액션으로만 변경할 수 있다.

Dispatch
스토어의 내장함수로 액션 발생을 요청하는 역할

2-Ⅲ. 리듀서

스토어에 저장되어 있는 데이터를 액션 내용대로 수정한다. 액션을 디스패치하면 리듀서는 자동 실행된다. 리듀서는 스토어 안에 포함된다(Reducer ∈ Store). 리듀서는 어떤 요청이 와도 같은 동작을 실행해야 한다. 즉, 순수함수여야 한다.

ActionCreator
액션 객체 생성 후 리턴해주는 함수

2-Ⅳ. 스토어

스토어는 데이터가 수정된 사실을 알린다.

Store
데이터 저장소. 스토어는 상태값, 리듀서(상태값을 변경해줄 수 있는 순수함수), 컴포넌트가 상태값을 가져가기 위한 내장함수(getState, dispatch 등)을 모두 갖고 있다. 리덕스는 단일 스토어 규칙을 따르기 때문에 한 프로젝트당 하나의 스토어만 사용한다. 대신 스토어 내에서 리듀서는 여러개일 수 있다.

2-Ⅴ. 리렌더링

컴포넌트가 새로운 데이터 가져오면서 리렌더링이 일어난다.