[React] 리덕스에서 만든 데이터를 컴포넌트에서 사용하기

리액트를 공부하면서 배운 것이 있다면, 순서의 중요성이다. 데이터를 컴포넌트에서 사용하려 할 때에도 우리가 지켜줘야 할 순서가 있다. 

1. 리덕스 모듈과 connect 함수를 불러온다. 
2. 상태값을 가져오는 함수와 액션 생성 함수를 부르는 함수를 만들어준다. (dispatch를 사용하겠다는 말이다)
3. connect로 컴포넌트와 스토어를 엮어준다. 
4. 콘솔에 this.props를 찍어본다. (스토어에 있는 값이 잘나왔는지 확인한다)
5. this.state에 있는 기존의 값을 지우고 스토어에 있는 값으로 바꿔보자. 

---

 

1.리덕스 모듈과 connect함수를 불러온다 :

connect함수는 우리가 리덕스에서 만든 데이터와 컴포넌트를 연결시켜주는 역할을 하는 함수이다. 우선 리덕스로부터 connect함수를 가져온다. 

import {connect} from "react-redux"

 

 

2.상태값을 가져오는 함수와 액션 생성함수를 부르는 함수를 만들어준다 :

우리가 이 connect함수를 사용하기 위해서는 두 가지 함수를 또 사용해주어야 한다. mapStateToProps와 mapDispatchToProps이다. 

mapStateToProps이 함수는 무슨 함수이냐? 이름 그대로 리덕스에 있는 state(데이터)를 props의 형태로 컴포넌트에 넣어주는 함수이다. 

mapDispatchToProps 함수는 dispatch를 넘겨주는 함수이다. 

 

 

mapStateToProps:

const mapStateToProps = (state) => {
	return {bucket_list: state.bucket.list};
}

state에서 우리가 원하는 값을 가져온다 

 

 

mapDispatchToProps:

import {loadBucket} from "./redux/modules/bucket";//우리가 만든 모듈에서 사용할 액션함수를 가지고 온다. 


//이 함수에서 우리가 사용할 액션함수를 dispatch에 넣어준다.
const mapDispatchToProps = (dispatch) => {
	return {
		load: () => {
			dispatch(loadBucket());
		}
	};

이전 글에서도 언급한 적 있지만, dispatch는 액션함수를 호출하는 역할을 한다. 

 

 

3.connnect로 컴포넌트와 스토어를 엮어준다.

다음으로는 connect로 컴포넌트와 스토어를 엮어준다. 

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(App));

 

 

4.콘솔에 this.props를 찍어본다. (스토어에 있는 값이 잘나왔는지 확인한다)

componentDidMount(){
	console.log(this.props);
}

componentDidMount. 돔 요소들이 렌더링이 다 된 후에, 콘솔로그를 찍어 우리가 가져온 props를 확인해본다. 

 

 

 

5.this.state에 있는 기존의 값을 지우고 스토어에 있는 값으로 바꿔보자. 

기존에 class에서 선언해두었던 값을 지우고, 본래 입력해주었던 값을 바꾸어서 출력하자. 

bucket_list = {this.state.bucket_list}
//이렇게 되어 있던 값을 

bucket_list = {this.props.bucket_list}
//이렇게 props로 넘겨주는 방식으로 바꾸어 주겠다는 것이다.