Redux

landvide·2021년 8월 25일

Redux란?

왜 하필 Redux인가?

그럼 Redux는?

Redux란?

리액트에서 상태를 더 효울적으로 관리하는데 사용하는 상태 라이브러리.

왜 하필 Redux인가?

컴포넌트끼리 직접 소통하는 방법도 있지만, 코드가 굉장히 많이 꼬여버리기 때문에 권장하지 않는 방식.

App 컴포넌트는 구조상 부모 컴포넌트에서 모든걸 관리하고 내려주는 것이기 때문에 직관적이고, 관리하기 편하지만, 앱의 규모가 커지면 보여지는 컴포넌트 개수도 늘어나고, 데이터도 늘어나고, 유지보수가 힘들어진다.

예시)

props를 차례대로 아래쪽으로 흘려 보냄.
내려가는 과정: A->E->G

그럼 Redux는?

리덕스에는 알아야 하는 개념 5가지가 있습니다.

Store
Subscribe
Dispatch & Action
Reducer
Listener

ㆍStore

ㆍ어플리케이션의 상태 값들을 내장하고 있다.
(중앙에서 변수 관리 개념이라고 생각하면 편하다.)
ㆍ리듀스에 의해서만 state의 값이 변경된다.

ㆍSubscribe

ㆍ스토어 값이 필요한 컴포넌트는 스토어를 구독함.
ㆍ리액트 컴포넌트에서 리덕스 스토어를 구독하는 작업은 후에 react-redux의 connect 함수가 대신 한다.
ㆍ리덕스의 내장 함수를 사용해 subscribe, unsubscribe 함수를 사용가능.

Dispatch & Action

ㆍDispatch는 액션을 스토어에 전달하는 것을 의미.

Action:

ㆍ상태 변화를 일으킬 때 참조하는 객체이다.

함수는

const mapActionToProps=(dispatch)=>{}

를 사용한다.

ㆍAction이라는 단어는 Event와 같다고 생각하면 된다.
ㆍDispatch 인수에서 Reduce로 넘길 객체(Type)를 정의한다.
ㆍAction이 실행되고 끝나면 type을 반환하는데 이는 Reduce로 간다.

Reducer

ㆍStore(스토어)의 문지기라고도 불리는 존재
ㆍ액션 객체를 받으면 타입에 따라 어떻게 상태를 업데이트 해야 할 지 정의를 해줌.

ㆍ리듀서 함수는 state(현재 상태) 와 action(액션 객체) 두가지의 파라미터를 받는다.
ex)

export function reducer(state = {state : 10, age:100}, action)

ㆍReducer 함수를 생성 할 때 살찐 에로우를 사용하지 않는다.
ㆍReducer 함수는 순수 함수여야 한다. 결과 값을 출력 할 때는 파라미터 값에만 의존해야 하며, 언제나 같은 결과를 출력해야 함
ㆍReducer에서 state를 사용하면 반드시 초기화 해야 함
ㆍReducer에서 state의 변화가 일어남
ㆍ값의 갱신은 반드시 reducer에서