리액트를 다루는 기술 _ 17장

월요일이라 피곤한 건지.

---

17장. 리덕스를 사용해 리액트 애플리케이션 상태 관리하기

React에서 Redux를 사용하면, 상태 업데이트에 관한 로직은 모듈로 따로 분리하여

컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는 데 도움이 된다.

 

또한 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며,

실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수도 있다.

 

React에서는 store 내장함수(dispatch, subscribe 등)를 사용하기보다

react-redux라는 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용한다!

 

 

설치는 이렇게!

 

medium.com/@ca3rot/%EC%95%84%EB%A7%88-%EC%9D%B4%EA%B2%8C-%EC%A0%9C%EC%9D%BC-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%AC%EC%9A%B8%EA%B1%B8%EC%9A%94-react-redux-%ED%94%8C%EB%A1%9C%EC%9A%B0%EC%9D%98-%EC%9D%B4%ED%95%B4-1585e911a0a6

아마 이게 제일 이해하기 쉬울걸요? React + Redux 플로우의 이해

Redux는 어찌저찌 넘어갔다 쳤는데...

React 컴포넌트가 끼어드니 영 헷갈린다.

오늘도 다른 분의 훌륭한 설명을 참고. 대한민국 개발자 만세!

 

17-1) 리덕스 짚어보기

순수 Redux의 흐름도!

Store는 앱의 모든 상태가 들어있는 공간!

Action은 이 Store를 변형시키는 녀석(state의 변화를 이끌어 내기 위해 정의된 타입들)!

Reducer는 action이 state를 어떻게 변형시키는지를 정의하는 함수! (이전 상태와 Action을 받으면, 새로운 상태를 반환)

View는 실제 화면이 보이는 부분, 즉 컴포넌트! Container는 컴포넌트가 여러 개 있는 것!

selector는 Container들이 Store의 상태 값을 props에 담아 구독할 수 있도록 전달!

dispatch는 Container에서 발생한 Action을 전달하는 함수!(Action을 dispatch에 넘겨줌)

 

17-2) react-redux 이해하기

1. Connect

이러한 Redux의 흐름 속에... React가 끼어들기 위해서는?

react-redux에서 제공하는 connect란 함수를 통해 가능하다!

기본적인 사용법은 connect(mapStateToProps, mapDispatchToProps)(Component)

얘네가 뭔디?

mapStateToProps : Store가 가진 State를 어떻게 props에 엮을지 정함

mapDispatchToProps : Reducer에 action을 알리는 함수 dispatch를 어떻게 props에 엮을지 정함

Component : 위 두 가지가 적용된 props를 받을 컴포넌트를 정함

→ Store와 Reducer를 연결시킬 수 있도록 만들어진 Component가 반환!

뭐 요런 형태가 될테다!

 

2. useSelector

userSelector Hook을 사용하면 connect를 사용하지 않고도 리덕스의 상태 조회가 가능하다!

const 결과 = useSelector(상태 선택 함수) 의 형태로 사용.

 

3. useDispatch

요 녀석은 컴포넌트 내부에서 스토어의 내장 함수 dispatch를 사용할 수 있게 해준다.

const dispatch = useDispatch();

dispatch({type: '액션'}) 의 형태로 사용.

내 멘탈...