[17장] 리덕스 활용(2)

4. 리덕스 적용

1) 스토어 생성 / 배포 (Provider)

 

번외편) Redux DevTools

크롬 확장 프로그램으로 리덕스에서 관리하는 상태를 좀 더 보기 편하게 도와준다. 꼭 필요한건 아니고 원한다면 사용하자.

 

5. 컨테이너 생성

리덕스로 관리할 상태/함수들도 다 정의했고, 스토어에 짱박아서 뿌려줄 준비까지 끝났으니 실제로 갖다 쓰기만하면 된다.( = 디스패치하면 된다) 여기서 리덕스 스토어와 연동된 컴포넌트를 컨테이너 컴포넌트라고 부른다.

 

5.1 Hook

컨테이너 컴포넌트가 리덕스와 연동돼서 움직인다는 것까지 이해가 됐다. 그렇다면 연동하는 방법은 무엇일까? react-redux에서 제공하는 Hook을 사용하면 된다. 구체적으로는 스토어에 갖다 박은 상태(state)를 꺼내오고, 그걸로 적당히 원하는 동작을 구현해주면 된다(즉, dispatch해서 action을 실행한다)

 

1) useSelctor

useSelector(selector: Function, equalityFn?: Function)

 

스토어에 저장된 상태를 끄집어내오는 역할을 하며, selector는 스토어에서 상태를 꺼내서 원하는 형태로 반환시키는 함수를 인수로 전달받는다.

 

2) useDispatch

스토어 내장 함수인 dispatch를 사용하도록 도와주는 함수. 사용법도 매우 간단하다

3) useStore

스토어에 직접 접근해야 하는 상황이 오면 사용하는 함수. 근데 이런 상황 자체가 거의 없고, 애써 분리해서 만들어둔 스토어를 직접 접근해서 수정을 가하겠다고? 님 미침? 그냥 존재만 알아두셈

const store = useStore();
store.dispatch( { type: 'TRASH' } );
sotre.getState();

마지막으로 TodosContainer.js는 안건드렸으니 만져보고 끝내자.

5.2 유틸 Hook (useActions)

액션이 여러개일 경우 매번 일일이 dispatch( 어쩌구 )해주기 귀찮고 useCallback까지 쓰려니 더 헷갈려서 만들어주는 유틸 Hook. 이걸 쓰면 훨씬 더 코드를 깔끔하게 작성할 수 있다.

 

5.3 connect

컨테이너 컴포넌트를 리덕스와 연동시키는 방법으로 connect 함수도 존재한다. 근데 이건 2019년 이전까지 주로 썼던 함수로 지금와선 그닥 쓸 일이 없고, 과거 코드를 유지보수할 일이 생겼을때나 필요하게 될 것이다. (심지어 이 방법은 추천하는 방법조차 아니다. 그냥 과거의 유물정도)

 

function connect( mapStateToProps?, mapDispatchToProps?, mergeProps?, options? ) 함수 자체는 이렇게 생겼는데 중요한 것들만 대충 살펴보자.

 

• connect( mapStateToProps, mapDispatchToProps ) ( component )
  • funtion mapStateToProps( state, ownProps? ) : 리덕스 스토어 안의 상태를 컴포넌트의 props로 넘겨주는 함수
  • function mapDispatchToProps( dispatch, ownProps? ) : 액션 생성 함수를 컴포넌트의 props로 넘겨주는 함수

1) CounterContainer.js

* connect 발전형 (bindActionCreators)

대단한건 아니고 mapDispatchToProps에 일일이 화살표함수와 dispatch로 감싸가며 액션 생성 함수를 전달하는 과정을 줄이고자 제공되는 bindActionsCreators 유틸 함수를 쓰는 정도이다.

2) TodosContainer.js

근데 진짜 미안한데 Hook 도입된 이후로는 connect를 진짜 쓸 일이 없고 쓰지도 마셈.