redux

 

 

리엑트에서 어떤 프롭스를 아래, 아래, 아래,아래,아래,아래에 있는 하위 컴포넌트에서 써야할 때가 있는데.

그때마다 최하위 뎁스까지 연속해서 프롭스를 전달해야한다. 이것을 프롭스 드릴링 이라고 한다.

 

그 숨막히는 프롭스 드릴링 노가다(?)는 같은 작업을 반복한다는 점에서도 문제가 있지만,

유지보수가 깔끔치 못하다는 점이 크다고 볼 수 있다.

 

이를 해결하기 위해 리덕스를 사용한다. (아, 좀 한번에...)

전역변수 같은 스토어라는 걸 하나 두고 상태를 관리하겠다는 것이다.

 

그렇다면 필요한게 뭘까?

 

 

 

값 읽기

상태값에 접근하는데 제한을 두어야한다.

a=10 같이 휙 바꿔버리면 안되니까.

getState같은 것이 필요하겠다.

 

값 변화시키기

상태값을 변화시키는 장치를 두어야한다.

그래야 상태값을 업데이트 시키니까.

직접 접근해서 a=10 같이 할당하면 안된다.

함수의 동작으로 결과값을 업데이트 시키면 되겠다.

따라서 내부 상태를 변화시킬 수 있는 수단을 제공하고,

그 인터페이스에 따라서 사용하게끔만 해야한다.

 

변화시 알람

상태값이 변화 될 때마다 특정 기능이 동작하게 해야할 수 있겠다.

예를 들면 화면을 그린다던가(렌더).

그러므로 상태가 업데이트 되었을 때 이걸 실행해주세요. 하는 기능이 필요할 것이다.

 

 

 

 

 

redux의 주요 개념

 

 

store :

스토어 안에는 어플리케이션의 상태가 저장된다.

하나의 프로젝트에서는 단 하나의 스토어 사용이 원칙이다.

스토어를 생성시, "상태는 이렇게 바꿀겁니다" 하는 함수를 인자로 넣어준다.

미리 정의한 리듀서가 그 역할을 한다.

const store = createStore(리듀서)

 

dispatch : 

디스패치는 스토어의 내장 함수 중 하나다.

dispatch(action) action은 어떤 액션을 할지에 대한 정보가 담긴 객체 정도로 생각하면된다.

디스패치를 호출한다는 것은 어떤 의미일까?

디스패치에 전달된 엑션이 스토어에 리듀서에 전달되어 실행되는 것과 같다.

리듀서는 전달된 엑션을 보고 마치 주문서를 읽는 요리사 같이, 주문된 것을 확인하고, 작업한다.(값을 변화 시킨다.)

 

사용은 store.dispatch(increase())과 같이 사용한다.

그러면 내부적으로

1. dispatch가 action 객체를 만들어서 리듀서에게 전달,

2. 리듀서는 마치 주문서를 전달받은 요리사처럼 동작하고, 스토어의 상태를 변화 시킨다.

 

 

 

subscribe:

dispatch와 마찬가지로 스토어의 내장 함수 중 하나다.

인자로 함수를 넣어주면 스토어의 상태가 업데이트 될 때마다 호출해준다.

store.subscribe(함수)

 

다시 정리하면,

store라는 저장소가 있고,

그 저장소를 변화 시키는 수단으로는 dispatch가 있다.

dispatch는 직접적으로 store의 상태를 변경 시키는 것이 아니라, 스토어 내부의 리듀서에게 엑션을 전달만한다.

리듀서는 마치 주문서를 읽는 음식점의 주방장 같이, 주문된 것을 확인하고, 작업한다.(값을 변화 시킨다.)

스토어에 상태값이 변할 때마다 subscribe로 설정한 함수가 있다면 실행된다.