[Redux Tutorial] about Redux

누구 알려주려고 쓰는 튜토리얼 아님. 개인 기록용.

---

1. Redux 란?

• state를 관리하는 라이브러리
• 데이터에 보다 더 효율적으로 접근 O
• 불필요한 데이터의 흐름을 줄임

 

 

2. Why Redux?

보통 React를 쓰면 아래 영상과 같은 일이 일어난다.

이렇게 Component가 엄청나게 만들어지면(그것도 자식으로), 나중에 아주 자식에 있는 녀석이 어떤 데이터(props으로 전달되는)를 필요로 할 때, 아주 많은 부모 컴포넌트를 거치게 될 수 있다. 부모 컴포넌트들 중에 이 데이터를 필요로 하지 않는 녀석이 있다고 하더라도, 자식 컴포넌트에게 주려면 어쩔 수 없이 props로 전달해야만 한다(=불필요한 데이터의 흐름).

Redux는 state를 관리하는 하나의 Store를 두어, 위와 같은 상황을 막을 수 있다. (어떤 data를 필요로 하는 컴포넌트는Store와 직접 1:1 상담할 수 있음)

 

 

3. When?

• 프로젝트 규모가 큰 경우
• 비동기 작업을 자주 하는 경우
• Redux를 써봤더니 편한 경우

출처: https://react.vlpt.us/redux/

 

 

4. Redux Keyword

Action	상태 변화를 의도한 객체(또는 promise 등)	action type + data
Reducer	Action으로 state가 어떻게 변하는지 특정하는 함수	(previousState, action) => nextState
Store	상태가 관리되는 공간으로 하나만 존재함
Dispatch	Action을 발생시킴. Action을 파라미터로 전달하고 Reducer를 호출함
Subscribe	특정 함수를 전달받으면, Dispatch가 일어날 때마다 그 함수를 호출함