27. Redux - Redux의 작동방식2. React-Redux를 통해 상태 사용하기

지금까지 

1. State와 Store의 역할을 알아보고

2. Action, Reducer을 정의하여서 스토어에 해당 상태를 저장할 수 잇도록 리듀서와 스토어를 연결하는것 까지 알아보았다. 

 

여기서는 Redux의 Store에 있는 State를 React를 통해 사용하는 것에 대해 배운 것을 정리해보도록 하겠다. 

https://ko.redux.js.org/basics/usage-with-react/

React와 함께 사용하기 | Redux

1. Redux를 도입한 React component의 한계와 Presentational 컴포넌트와 Container 컴포넌트 분리

import React, {Component} from 'react';
import store from '.../store';

export default class VideoListEntry extends Component{
 ///...
 render(){
 	return (
    	///...
    )
  }
 }

 

이런 VideoListEntry component가 있다고 하자. 그러면 VideoListEntry component는 이 import store from '.../store';에 구현된 store가 있어야만 정상작동이 될 것이다. 즉, 우리 App에 사용하고 있는 State에 의존하고 있기 때문에 다른 App에서 사용하기가 힘들다. 

그러나 Redux의 store가 도입되기 전의 React Component의 최고 장점은 부품(Component)로서의 가치가 보존되어서 우리 App 뿐만 아니라 필요한 모든 사람이 여러 군데에서 사용할 수 있다는 것이었다. 

그러므로 Redux의 도입 이후에도 '재사용성'을 보존하기 위해 이 문제를 해결하는 것이 필요하다. 어떻게 할 수 있을까?

=> 정답은 Wrapping!

VideoListEntry component를 감싸는 새로운 컴포넌트를 만들고, 새로운 컴포넌트는 Redux의 Store를 핸들링하는 컴포넌트, 기존의 component는 Redux와 독립된 component로 만들어서 그냥 화면에 UI 출력 기능만 하도록 만드는 것이다. 

이 Redux와 독립된 component로 만들어서 그냥 화면에 UI 출력 기능만 하도록 하는 React component를 Presentational 컴포넌트

Redux의 Store를 핸들링하는 컴포넌트를 Container 컴포넌트라고 한다. 

 

https://ko.redux.js.org/basics/usage-with-react/ 공식홈페이지에 이 둘에 대해서 잘 나와있어서 많은 도움이 되었다. 

	Presentational 컴포넌트	Container 컴포넌트
목적	어떻게 보여질 지 (마크업, 스타일)	어떻게 동작할 지 (데이터 불러오기, 상태 변경하기)
Redux와 연관됨	아니오	예
데이터를 읽기 위해	props에서 데이터를 읽음	Redux 상태를 구독
데이터를 바꾸기 위해	props에서 콜백을 호출	Redux 액션을 보냄
Are written	By hand	Usually generated by React Redux

위의 홈페이지에 따르면, Container 컴포넌트Container 컴포넌트

엄밀히 말하면 여러분이 직접 
store.subscribe()을 사용해서 container 컴포넌트를 작성할 수도 있습니다. 하지만 이렇게 하는 것을 추천하지는 않는데, React Redux는 여러분이 직접 구현하기는 힘든 여러가지 성능 최적화를 해주기 때문입니다. 이런 이유에서, 우리는 container 컴포넌트를 직접 작성하지 않고 React Redux가 제공해주는 connect() 함수를 사용해 container 컴포넌트를 생성해줄 것입니다. 이를 어떻게 할 수 있는지 아래에서 확인해보겠습니다.

라고 한다. 

그래서 connect()란 뭔지, connect를 찾아 보았을 때 인수로 나오는 mapStateToProps, mapDispatchToProps는 무엇인지를 알아보고 사용까지 해 보자.

 

2. container 컴포넌트를 작성 -  Connect( ) 함수

https://react.vlpt.us/redux/09-connect.html

9. connect 함수 · GitBook

 

https://velog.io/@jeonghoheo/Redux-React-%EC%9A%94%EC%95%BD

Redux-React의 기본

이 두 reference가 많은 도움이 되었다. 

connect함수는 Container 컴포넌트를 만드는 방법 중 하나이다. 

connect의 첫번째 인수: mapStateToProps

connect의 두번째 인수: mapDispatchToProps

사용하면

export default connect(mapStateToProps,mapDispatchToProps)(VideoListEntry);

가 되겠다!

그러면 mapStateToProps, mapDispatchToProps가 뭔지를 알아서 위의 코드가 어떤 의미인지 ,무슨 기능을 하는지 알 수 있겠죠?

 

2-1. mapStateToProps: Redux(의)State(를)To React(의) Props(로) (mapping(연결)해준다)

mapStateToProps는 기본적으로 store가 업데이트가 될때 마다 자동적으로 호출이 된다.이를 원하지 않는다면 null 혹은 undefined값을 제공해야한다. (reference)

그리고 Store의 값을 조회해야할 때 사용한다. 

① mapStateToProps 작성법

function mapStateToProps(){
  //mapStateToProps: 이는 map Redux(의)State(를)To React(의) Props(로) (mapping(연결)해준다)
  //라고 생각하면 되고, 이게 이  mapStateToProps()함수가 하는 일이다. 
  //작성 방법 
  return {
    [해당 컴포턴트에 이 state값이 전달될 props명]: [그 props에게 공급될 값],
  }
}

② mapStateToProps 예

// mapStateToProps 는 리덕스 스토어의 상태를 조회해서 어떤 것들을 props 로 넣어줄지 정의한다.
// 현재 리덕스 상태를 파라미터로 받아온다.
const mapStateToProps = state => ({
  currentVideo: state.videoReducer.currentVideo,
  darkMode: state.settingReducer.darkMode,
});

2-2. mapDispatchToProps: Redux(의) Dispatch(를) To React(의) Props(로) (mapping(연결)해준다)

mapDispatchToProps는 store에 접근한 컴포넌트가 store의 상태를 바꾸기 위해 dispatch를 사용할수 있게 만들어준다.(reference)

즉, Store을 변경해야 할 때 dispatch(action)의 값을 props로 받아서 사용한다. 

① mapDispatchToProps 작성법

function mapDispatchToProps(){
  //mapDispatchToProps: map Redux(의) Dispatch(를) To React(의) Props(로) (mapping(연결)해준다)
  //라고 생각하면 되고, 이게 이  mapDispatchToProps()함수가 하는 일이다. 
  //작성 방법
  return {
  	  순수 action객체를 dispatch 해준다.
    }
});

② mapDispatchToProps 예

function mapDispatchToProps(){
  //mapDispatchToProps: map Redux(의) Dispatch(를) To React(의) Props(로) (mapping(연결)해준다)
  //라고 생각하면 되고, 이게 이  mapDispatchToProps()함수가 하는 일이다. 
  // 순수 객체를 반환해줘야한다.
  return {
  	increment: () => dispatch({Action}),
    }
});

그래서 정리하면 

export default connect(mapStateToProps,mapDispatchToProps)(VideoListEntry);

이렇게 해줬을 때 

mapStateToProps와 mapDispatchToProps가 반환한 객체에 TodoAppVideoListEntry컴포넌트가 this.props로 접근할수있다.

① mapStateToProps을 사용해서 Nav Container 컴포넌트에 상태 전달해주는 코드  예시

import { connect } from 'react-redux'
import Nav from '../components/Nav'

const mapStateToProps = (state) => {
  // console.log('Nav user:', state.settingReducer.currentUser)
  // console.log('Nav darkmode:', state.settingReducer.darkMode)
  return {
    user: state.settingReducer.currentUser,
    darkMode: state.settingReducer.darkMode,
  }
}

export default connect(mapStateToProps)(Nav)

② mapDispatchToProps을 사용해서 VideoListEntry 컴포넌트에 상태 전달해주는 코드 예시

import { connect } from 'react-redux'
import { setCurrentVideo } from '../actions'
import VideoListEntry from '../components/VideoListEntry'

const mapStateToProps = () => ({})

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onEntryClick: () => {
      return dispatch(setCurrentVideo(ownProps.video))
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(VideoListEntry)

이렇게~!

그러면 상태값이 props 로 전달되고, 사용될 준비가 될 것이다!

 

Reference

https://velog.io/@jeonghoheo/Redux-React-%EC%9A%94%EC%95%BD

Redux-React의 기본

https://react.vlpt.us/redux/09-connect.html

9. connect 함수 · GitBook

https://react-redux.js.org/using-react-redux/connect-mapstate

React Redux · Official React bindings for Redux