Redux Session

Redux ? 상태관리 Library

Redux를 사용하지 않는 경우, 변수나 함수를 부모 컴포넌트에서 관리하기 때문에 전달도 부모 컴포넌트를 통해서만 (props로) 가능하다. 두세 개의 컴포넌트를 거쳐야 한다면, 변경이 필요한 경우 모든 파일을 열어 해당 변수 혹은 함수를 각각 변경해야 한다. 게다가 컴포넌트가 이 방식으로 관리할 수 없을 만큼 많아지거나 부모-자식 관계가 아닌 한참 떨어진 형제 컴포넌트에게 값을 전달해야 한다면 여러번 거듭해서 같은 작업을 반복해야 하는데다 실수할 가능성도 커지기 때문에 굉장히 번거로워질 것이다.

반면 Redux는 상태 관리를 컴포넌트 밖에서 한다. Redux Store에 이 프로젝트에서 관리할 상태에 관한 데이터가 담겨있고, 어떤 컴포넌트에서든 그 데이터를 구독(subscribe) - 변경 (dispatch(action))할 수 있다. 여러 컴포넌트를 거쳐야 할 필요가 없어지는 것이다. 여기서 action 함수는 action 객체를 반환하는데, { type: 'INCREMENT', diff: 2 } type은 필수, 두번째 값은 선택적 값이다.

은행	Redux	Description
입금/출금	Action	action : 행위의 이름 & payload : 행위의 재료
요구사항을 전달	Dispatch	메신저 역할을 한다. 이 때 메신저는 요구 내용을 모르기 때문에, 모든 Reducer에 Action을 전달한다.
계좌	Reducer (State)	- Reducer function의 parameter = 기존 state & action 객체 - 기존 state는 절대로 변경하지 않고 새로운 state를 만들어 반환한다. - 동일한 parameter로 호출된 reducer function은 언제나 똑같은 결과값을 반환한다.- 이 action이 다른 Reducer에도 전달되기 때문에 이 함수가 실행되지 않는 경우 default로 state를 반환한다. - 초기값 설정 ? const INITIAL_STATE = 0 ➡️ 인자로 state = INITIAL_STATE 전달
계좌 개설/해지		추가 ReducerCustomer = () =>{ ... { return [...state, action.type] } }