[10주차] 3. 리액트 Redux(2)

리액트 Redux

• 상태 조회 hook: useSelector
  • const { number, diff } =useSelector(state => ({}))
  • 여기서 state는 store.getState()로 조회한 값으로 리덕스의 현재 상태이다.
• 액션 디스패치 할 경우 useDispatch Hook 사용
  • 디스배치 함수 사용 가능

프리젠테이셔널 컴포넌트와 컨네이너 컴포넌트

• 컨테이너와 프레젠테이셔널 컴포넌트를 따로 분리해서 작성하게 되면 프리젠테이셔널 컴포넌트의 재사용율도 높여줄 수 있고 관심사를 분리할 수 있어서 굉장히 유용한 패턴이다.
• 리덕스 사용시 이런 형태로 개발하는 것 정석이긴 하지만 무조건 답은 아니다
• 복잡한 상태 로직을 분리시키기 위함이지만 꼭 이렇게 분리해서 작업하지 않아도 된다.
• 디렉토리 상에서는 따로 분리하는 것은 추천하지는 않는다

프리젠테이셔널 컴포넌트 Presentational Component

• 단순히 UI 선언하는데 집중
• 오직 뭐가 클릭되면 받아온 props를 호출하고 받아온 값을 특정부분에서 보여주는 등의 작업을 한다.
• components 폴더>presentational 컴포넌트는 주로 UI를 선언하는 데 집중하고 필요한 값이나 함수는 props로 받아와서 사용

컨테이너 컴포넌트

• 상태관리에 집중
• props로 뭔가를 가져올 필요 없다.
• 컨테이너 컴포넌트에서 리덕스 스토어 상태를 불러오고 그리고 함수가 호출되면 액션 디스패치 하는 작업을 처리한다.
• containers 폴더>containers component는 리덕스에 있는 상태를 조회하거나 액션을 디스패치할 수 있는 컴포넌트 의미, 이름은 컴포넌트이름Container로 작성

리덕스 개발자 도구

• 리덕스 개발자 도구 사용시 현재 스토어 상태, 지금까지 어떤 액션들이 디스패치 되었는지, 액션에 따라 상태가 어떻게 변화해왔는지, 액션 상태 뒤로 되돌리기, 액션을 개발자 도구에서 바로 디스패치 하는 등의 작업 가능하다
• Chrome 앱 > 웹스토어 > Redux DevTools 설치
• yarn add redux-devtools-extenstion
• index.js에서 스토어 만들 때 상단에서
  import {compseWithDevTools } from ‘redux-devtools-extension’; 선언 후

const store = createStore(rootReducer, composeWithDevTools()); 이런 식으로 createStore 함수 두번째 인자로 넣어줌

• 페이지 개발자 도구 > Redux 탭 에서 볼 수 있음
  • 키보드 아이콘 누르면 액션을 직접 디스패치 가능
• DevTools 사용법
• profiler 메뉴에서 회색은 렌더링 되지 않은 것, 주황색, 노란색, 초록색은 렌더링 된 것, 초록색은 렌더링이 빨리 된 것이고 색이 노래질수록 렌더링이 오래 걸린 것을 의미한다.

useSelector 최적화

• useSelector을 통해서 여러 값을 가져와야 할 경우 useSelector을 여러 번 사용하거나 useSelector을 한번 사용하는데 객체를 가져오게 하고 shallowEqual 함수를 쓰는 방법 두가지로 최적화 할 수 있다.
• 업데이트(리렌더링)가 많이 일어나지않고 무겁지도 않으면 사실상 최적화 안해도 빠르니까 모든 것을 최적화 할 필요는 없다
• 개발 하는 과정에서 리렌더링할 때 컴포넌트 내용이 많거나 또는 리스트를 렌더링하게 될 때 리스트에 많은 항목이 들어있거나 리렌더링이 빈번하게 일어날 경우 최적화를 고려해 봐야 한다.

Connect, HOC

• 쓸 일 별로 없고 useSelector과 useDispatch 쓰는 것을 우선시해야 한다.

Connect 함수

• 클래스 형 컴포넌트 사용할 경우 connect 함수 사용하는 것이 리덕스와 연결하는 유일한 방법
• 컴포넌트의 Props를 통해서 리덕스의 상태 또는 액션을 디스패치하는 함수를 받아올 수 있음
• connect를 꼭 클래스형 컴포넌트에서 쓸 필요는 없음(사용방법은 동일)
• mapStateToProps 함수, mapDispatchToProps 함수 작성 필수
  • 꼭 객체 형태로 반환해야 한다..
• mapStateToProps 함수는 state를 파라미터로 가져오고 컴포넌트에 넣어주고 싶은 값들을 반환하는 객체안에 작성, 두번재 파라미터 ownProps(=직접 넣어주는 props 의미)를 받아올 수 있다
• mapDispatchToProps 함수는 dispatch를 파라미터로 사용하고 반환하는 객체에서는 함수를 만들어주면 컴포넌트 값들을 받아와줌
• Hook과 다르게 props를 통해서 값 또는 함수를 받아올 수 있다.
• export default connect(mapStateToProps, mapDispatchToProps)(컴포넌트);
• 3번째 파라미터 mergeProps는 생략해도 상관없다. 이것은 하나의 함수로 실제로 컴포넌트가 전달받게 될 함수를 정의할 수 있다. 특정 컴포넌트에 함수 넣어주고 싶을 경우 현재의 props나 현재 리덕스 상태 참조할 때 사용. 잘 사용x
• 4번째 파라미터 Options :

HOC

• 재사용되는 값, 함수를 Props로 받아올 수 있게 해주는 옛날 패턴
• 최근에는 Hook이 이자리를 차지하고 있어 이런 게 있었다는 것만 알면 됨

Tips

• 이름 쓴 상태로 ctrl + enter 누르면 컴포넌트 주소 자동 불러와짐