Redux

Redux는 React 없이도 사용할 수 있는 상태 관리 라이브러리이다.

Redux 데이터 흐름

Redux의 구조

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

Redux는 다음과 같은 순서로 상태를 관리한다.

1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다.

2. 이 Action 객체는 Dispatch 함수의 인자로 전달된다.

3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해준다.

4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경한다.

5. 상태가 변경되면, React는 화면을 다시 렌더링한다.

Store

Store는 상태가 관리되는 오직 하나뿐인 저장소의 역할한다. Redux 앱의 state가 저장되어 있는 공간이다.

Reducer

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

⭐️ Reducer는 순수함수여야 한다. 외부 요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야하기 때문이다.

Action

Action은 말 그대로 어떤 액션을 취할 것인지 정의해 놓은 객체의 형태로 구성된다.
type은 필수로 지정을 해 주어야 한다.

Dispatch

Dispatch는 Reducer로 Action을 전달해주는 함수이다. Dispatch의 전달인자로 Action 객체가 전달된다.

Redux Hooks

Redux Hooks는 React-Redux에서 Redux를 사용할 때 활용할 수 있는 Hooks 메서드를 제공한다. 그 중에서 크게 useSelector(), useDispatch() 이 두 가지의 메서드를 사용한다.

useDispatch()

useDispatch() 는 Action 객체를 Reducer로 전달해 주는 Dispatch 함수를 반환하는 메서드이다.

useSelector()

useSelector()는 컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게 해주는 메서드이다.