사실 최근까지 redux를 왜 사용하는지 이해하지 못했었다. react만 이용해도 충분히 state관리가 편하게 되는 줄 알았는데 그건 내 큰 착각이었다. 지금 코드스테이츠에서 4주 프로젝트를 하며 state 관리하는 라이브러리가 필요하다가 절실히 느꼈고 redux를 도입하면서 connect도 한번 사용해 봤다.
이 글은 리덕스에 어느정도 관심이 있고 기본적인 플로우를 이해하고 있다고 가정하에 작성하겠습니다.
connect
정말 많은 글을 참고 하였고 많은 영상을 보고도 이해 안 가 수십 번 돌려본 저의 connect의 사용법을 가장 쉽게 풀어 쓰겠습니다.
먼저 connect 란 react-redux의 하나의 함수이다. 주로 container 컴포넌트를 생성할 때 사용하는 것을 추천합니다.
connect를 사용하면, 쓸데없는 렌더링을 막아주어 성능이 향상되고 직접 작성해야 하는 부담을 좀 덜 수 있습니다.
//간단한 코드
//App.js
//....
const mapStateToProps = (state) => {
return {
userfile: state,//store에 state값 모두를 전달
//userifle: state.User //store에 state.User만 전달
}
}
export default connect(mapStateToProps)(App)//App컴포넌트의 props로 전달
사용법은 간단합니다.
connect(mapStateToProps,mapDispatchToProps)(App) 이런 식으로 사용됩니다. 천천히 mapStateToProps부터 알아보도록 하겠습니다.
mapStateToProps는 store의 값이 바뀔 때마다 호출되도록 약속되어있고 그때 STORE에 STATE 값이 전달되는데 그 STATE를
가공해서 리턴 하고 싶은 props에 인자를 객체로 적고 공급될 값을 적어주면 된다.
위 코드를 보면 connect에 mapStateToProps를 인자로 주게 되면 App컴포넌트에 props로 store의 state값이 전달되게 된다 여기서 mapStateToProps의 인자인 state는 redux store의 state로 Store의 state전부를 전달할 수 있고 위 코드처럼 일부만 전달할수 있다.
mapDispatchToProps
mapDispatchToProps는 더 간단하다 그냥 redux의 dispatch를 react의 컴포넌트에 props로 전달, 연결시켜주는 정보를 담고 있는 함수이다.
mapDispatchToProps는 인자로 dispatch메소드를 인자로 받습니다. 그냥 간단하게 action을 변경시켜주는 onClick 같은 이벤트를 줄 때 사용하게 됩니다.
//containers/Main.js
function mapDispatchToProps(dispatch) {
return {
onClick: () => dispatch(액션) //액션을 정의해주면 된다
}
}
export default connect(null, mapDispatchToProps)(Main)
// Presentational/Main.js Main컴포넌트에
// props로 onClick을 불러올수 있게 된다위 코드에서는 Presentational Main과 Container Main을 나눠주었다 Container 컴포넌트에서 connect를 정의해
Presentational 컴포넌트의 props로 onClick을 보내준 것이다.
이로 인해 Presentational 컴포넌트에서는 props.onClick을 실행하게 되면 바로 mapDispatchToProps가 실행되면서
dispatch로 action을 보내줄 수 있어 깔끔하게 코드가 정리되게 된다.
마지막으로 mapStateToProps는 스토어에 상태가 변하면 호출되는 함수로, 정의해준 컴포넌트(App)의 props로 전달될 값을
수정 정의할 수 있고 이때 mapStateToProps의 인자 state는 store의 모든 값을 받게 된다.
mapDispatchToProps는 일자로 dispatch를 받고 스토어로 액션을 보내는 일을 해준다. dispatch에 적절한 액션을 넣어주면 store로 전달되어 state의 값이 변하게 된다. 이때 mapStateToProps 가 정의되어 있다면 state가 변경되어 호출되는 것이다.
-ps 좀 더 알고 싶으신 분들은 아래 주소로 가시면 redux 공식문서를 한글로 번역해주신 분들이 있습니다!
다음 글에는 connect보다 쉽고 간편한 redux hooks에 대해 글을 작성해 보겠습니다!
설명이 부족하거나 틀린 부분이 있으면 댓글로 지적 바랍니다!