201013_TIL

oh_ji_0·2020년 10월 13일

목록 보기

46/61

Today I learned

Redux

Redux 기본 규칙

Redux의 주요 개념들

store

Action & Action 생성자(액션객체)

reducer

dispatcher

Presentational Component & Container Component

비동기 액션생산자

Redux의 장점

@@ 오늘은 HA를 무사히 마치고, 어제 다 못마친 리덕스를 복습, 정리하는 시간을 가졌다. HA는 리덕스를 제외한 리액트 컴포넌트의 전반적인 구성(클래스컴포넌트로)과 단순 GET 요청에 데이터를 전달하는 서버 구성(express)으로 나눠져있었다. 걱정했던 것보다는 일찍 마무리할 수 있었다.

리덕스는 리덕스 flow를 그리면서 흐름을 알기 위해 노력했는데, dispatch 개념과 비동기 비동기 액션 생산자, thunk 미들웨어 부분이 어려웠다. 어제 오늘 복습하면서 리덕스에 값을 저장하고 빼오려면 어떤 코드들이 필요한지는 대강 눈에 그려졌지만 그 외에 프로젝트에 전체 세팅하고 연결하는 흐름은 아직 내가 혼자서 구성할 수 있을지 감이 안온다.

또한 점차적으로 클래스 컴포넌트보다는 함수 컴포넌트를 사용하여 가는 추세이고, hooks에 대한 부분도 연습이 필요해보이는데 리덕스를 구성할 때 사용하는 presentational component 와 container component 중 container component를 함수형 컴포넌트로 구성하게 되면 잘 작동하는지, 아직은 잘모르겠다. 이것도 역시 hooks를 공부해본 뒤 한번 직접 해봐야 알 수 있을 것 같다.

Redux

자바스크립트에서 사용할 수 있는 스테이트 컨테이너
단순히 리액트 내부에서만 사용하는 하위 라이브러리가 아닌 리액트 없이도 사용할 수 있는 상태관련 라이브러리
State Lifting up, Props drilling 등의 복잡한 컴포넌트 구조에서의 한계점이 드러남에 따른 대안
앱 곳곳에서 필요한 상태를 보다 간편하고 효율적으로 접근 및 전달할 수 있는 공용 스토어의 필요성
그에 대한 대안인, 상태 관리 라이브러리

Redux의 기본 규칙

1) 상태가 관리되는 오직 하나의 공간, 스토어
2) 스테이트는 읽기 전용이다.
3) 순수함수를 통해 변화가 만들어져야 한다

Redux의 주요 개념들

Store

리액트에 사용되는 동적데이터를 담아두는 공간.
dispatch가 저장되어있다.
dispatch를 통해서 값이 저장되고,

Action & Action 생성자(액션객체)

Simple Javascript object
마치 주문서와 같은 형태로 action.type 와 스토어로 전달할 값이 적혀있다.
스토어에 저장되어있는 dispatch 를 통해서 해당 주문서를 리듀서로 전달한다.
bindActionCreator(actionCreators, dispatch)

redux를 상관하지 않는 컴포넌트로 액션 생산자를 넘기지만 dispatch나 redux저장소는 넘기고 싶지 않을때 사용한다.

Reducer

action 객체를 받았을 때 데이터를 어떻게 바꿀지 정의하는 객체
리듀서는 디스패치를 통해 전달 받은 현재 상태와 액션을 통해서 새로운 상태값을 만들어낸다.
컴포넌트 트리로 변화된 상태를 View 화면에 뿌린다
컴포넌트 트리로 변화된 상태는 크롬 개발자 도구 redux탭에서 확인 가능하다. ( 확장 설치 필요 )
대규모 개발에서 리듀서를 분할하는 경우에 Redux에서 제공하는 combineReducers함수를 이용한다.
dispatch로 값을 전달받으면 모든 리듀서가 실행된다. 따라서 리듀서에 액션 타입에 따른 분기처리를 하면 관계있는 액션만이 처리 된다.

Dispatcher

스토어 전달자, 스토어에 액션을 전달한다.( Flux Architecture )
dispatch라는 메소드를 통해서 액션을 리듀스에 전달한다.
액션 생성자에서 액션을 만든다고 해도 그것으론 아무것도 일어나지 않는다. 리듀서에 전달하기 위해선 dispatch라는 함수에 넘겨줘야 한다.

추가로 connect 함수를 통해 스토어가가진 state를 props에 전달(mapStateToProps) Reduce에 액션을 알리는 함수 dispatch를 props에 전달(mapDispatchToProps)
props는 읽기 전용이다. 상태가 변결될때마다 새로운 컴포넌트를 다시 만든다. connect(mapStateToProps, mapDispatchToProps)를 통해 반환하는 값은 결국 스토어와 리듀서를 연결시킬 수 있도록 만들어진 컴포넌트다.

자세한 설명은 여기 참고

Presentational Component & Container Component

재사용성과 유지보수를 위한 패턴
Presentational Component
- 단순 View 담당 (마크업, 스타일)
- 보통 함수 컴포넌트로 작성된다.
- 데이터를 불러오거나 변경하는 작업을 하지 않는다.
- 데이터는 Props로 단순히 받아 처리 한다.
Container Component
- Redux 와 같은 상태 관련 작업 수행
- 데이터 관련 작업을 수행하며, 해당 작업을 통한 데이터를 내부 Presentional Component 혹은 Container Component에 전달한다.
- store.subscribe() 을 사용해서 컨테이너 컴포넌트를 직접 작성할 수도 있지만 성능 최적화 이유로 권장하지 않는다.

비동기 액션생산자

redux-thunk

thunk를 사용하면 액션 대신 함수를 반환하는 액션 생산자를 사용할 수 있다. thunk는 액션을 디스패치하는 것을 지연시키거나, 특정 조건을 만족시킬때 디스패치를 날리도록 해줄 수 있다. 내부 함수는 파라미터로 디스패치를 받아서 상태를 전송하고 가져온다.

자세한 것은 공식문서 참조
```
const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

function increment() {
  return {
    type: INCREMENT_COUNTER,
  };
}

function incrementAsync() {
  return (dispatch) => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };
}
```