리액트를 다루는 기술 _ 17장
월요일이라 피곤한 건지.
17장. 리덕스를 사용해 리액트 애플리케이션 상태 관리하기
React에서 Redux를 사용하면, 상태 업데이트에 관한 로직은 모듈로 따로 분리하여
컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는 데 도움이 된다.
또한 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며,
실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수도 있다.
React에서는 store 내장함수(dispatch, subscribe 등)를 사용하기보다
react-redux라는 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용한다!
설치는 이렇게!
아마 이게 제일 이해하기 쉬울걸요? React + Redux 플로우의 이해
https://qiita.com/mpyw/items/a816c6380219b1d5a3bf?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items 를 번역한 문서입니다.
medium.com
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: '액션'}) 의 형태로 사용.
