Redux 공부

오늘은 각자 Redux 공부를 하기로 했다.
긴장이 풀려서인지 낮에는 뒹굴뒹굴 하다가 저녁이 다되서야 공부를 시작했다;;
솔직히 봐도 잘 모르겠지만 꾸역꾸역 다시 복습해보자

Redux

리액트에서 데이터 흐름은 단반향이기 때문에,
여러 컴포넌트가 하나의 state에 의존한다면,
공통된 조상 컴포넌트에 state가 위치해야하고,
이를 props로 전달하여 state에 접근해야한다.
컴포넌트의 deepth가 몇 안될때에는 괜찮겠지만,
만약 10level의 deepth를 가지고 있다면 props를 10번 내려줘야한다.
이를 "props drilling"이라고 한다.

Redux는 이 문제를 해결 해준다.
Store라는 공간을 만들어 여기에 state를 저장하고 컴포넌트가 어디에 위치해 있든,
Store에서 필요한 정보를 바로 가져올 수 있다.
또한, state에 직접 접근을 불가능하게 해서 의도치않은 값의 변경이 없어진다.
그로인해 state값이 예측 가능해진다.

용어 정리

Store: Store 는 쉽게 말해 state 를 저장하는 곳입니다. 기존에는 조상 컴포넌트에 state 가 위치했다면 이제 Store 에 state를 보관하는 것이죠. 컴포넌트 외부에 있기 때문에 계층 구조에서 벗어나 독립적으로 존재하고, 컴포넌트 어디에서나 접근이 가능하다고 합니다.

Action: Action 은 파라미터를 입력 받아 객체 형태로 전달합니다. 객체 안에 필수로 type 라는 키와 값이 지정되어야 하고, 그 외에도 전달하고자 하는 것들을 선택적으로 사용할 수 있다고 합니다.

Dispatch: Dispatch 는 Action 을 전달하는 메소드 입니다. dispatch 의 매개변수 자리에 dispatch(action) 의 형태처럼 전달인자로 action 객체가 전달되는 형태입니다.

Reducer: Reducer 는 현재의 state 에 전달 받은 action 을 이용해서 새로운 state 를 만들어냅니다. 이 때 reducer 는 순수 함수 (pure function) 이고, state 의 업데이트는 immutable 한 방식으로 이루어져야 합니다.

출처 https://velog.io/@eensungkim/Redux-studyv.1-TIL-60%EC%9D%BC%EC%B0%A8

아래는 이해한대로 작성해봤다.

Store

리덕스의 핵심, 은행의 금고라고 생각하면 된다.
Store는 state라는 실제 정보가 저장이 되는곳이다.
Store에서 가장 중요한것은 state에 직접 접근하는것이 금지되어있고 불가능하다.
은행 금고는 곧바로 들어갈 수 없고, 창구의 직원을 통해 접근하는 것 처럼
항상 state에 접근하기 전 어떠한 절차를 통해 접근해야한다.

function reducer(oldState, action){
	//...
}

const store = Redux.createStore(reducer);

이 store라는 변수는 전역 위치에서 지정해야 어디서든 접근이 가능하다.

Action

state를 바꾸는 행동을 dispatch를 통해서 store에 전달하는 역할
이때 리듀서 함수가 state를 알맞게 변경 시켜준다.

Reducer

Redux에서 가장 어려운부분,
state를 입력 값으로 받고 액션을 참조해서 새로운 state 값을 만들어내서 새로운 state를 저장한다.
이때 새로운 state는 Object.assign을 이용해 새로 복제를 해준다.

Object.assign({}, oldState, newState = {color: 'red'})

한마디로 Reducer는 state 가공자이다.

dispatch

디스패치는 두가지 일을 한다 리듀서를 호출해서 state값을 바꾸고 subscribe을 이용해 render함수를 실행해준다.
리듀서를 호출할때는 현재의 state값과 action 객체를 전달한다.
리듀서 내부 코드에 따라서 가공된 뒤 가공된 새로운 state를 리턴한다.

리듀서가 리턴한 새로운 state값을 subscribe에 접근하여 render함수를 호출하여
새로운 state에 맞게 ui가 변경되게 한다.

render

state값이 바뀌면 애플리케이션의 ui에 적용을 시켜주는 역할,
리액트에서는 render함수(class)나 함수 컴포넌트가 될것이다.
state값이 바뀔때마다 render가 자동으로 실행되도록 해줘야한다.
그렇게 하기 위해서는 subscribe에 render를 등록시켜야한다.

subscribe

구독이라는 뜻을 가지고 있으며,
상태가 변경될때마다 호출이 된다.
인자로 render함수를 받는다.

getState

store에 저장된 state값을 가져오는 역할이다.

const state = store.getState()

해당 코드를 통해 store의 저장된 state를 변수에 저장하며 가져온다.

참고사이트

https://velog.io/@eensungkim/Redux-studyv.1-TIL-60%EC%9D%BC%EC%B0%A8