[Section 3] React - Redux

Redux 사용하는 이유

기존의 방식은 컴포넌트를 생성하고 사용자 이벤트를 통해 해당 컴포넌트 또는 다른 컴포넌트에 변화를 주는 방식 Redux를 활용하면 컴포넌트와 상태를 분리하는 패턴으로 상태 관리를할 수 있다.

• 최하위 컴포넌트에서만 사용하는 상태

1. 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를 가짐
2. 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함
3. 애플리케이션이 복잡해질수록 데이터 흐름도 복잡해짐
4. 컴포넌트 구조가 바뀐다면, 지금의 데이터 흐름을 완전히 바꿔야 할 수도 있음

따라서 Redux를 활용해 전역 상태를 관리하는 Store저장소로 해결한다.

---

Redux 구조

1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다.
2. 이 Action 객체는 Dispatch 함수의 인자로 전달됩니다.
3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해 줍니다.
4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
   상태가 변경되면, React는 화면을 다시 렌더링 합니다.

Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 된다.

Store

createStore 메서드를 활용해 Reducer를 연결해서 Store를 생성

import { createStore } from 'redux';

const store = createStore(rootReducer);

Reducer

Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수