[React] mapDispatchToProps, mapStateToProps 이해하기

앞선 포스트에서 리덕스를 사용하게 되면 리액트 컴포넌트의 상태관리를 컴포넌트 내부가 아닌 외부에서 관리할 수 있다고 말씀드렸습니다. 지금 소개할 mapDispatchToProps와 mapStateToProps는 바로 리덕스를 통해 컴포넌트의 상태 관리를 할 때 요구되는 함수들입니다. 

리덕스를 공부하신 분들은 리덕스가 상태관리를 reducer를 통해 한다는 점을 아실 겁니다. reducer 함수는 state와 action을 자신의 인자로 받습니다. reducer 함수가 state와 action을 인자로 받는 까닭은, 기존에 redux store에 저장된 state를 변경하고 싶을 때, 그러한 요구사항을 담은 action을 reducer에 dispatch(전달)하면 reducer는 dispatch된 action(state를 어떤 식으로 변경해달라는 요구사항)에 부합하게 state를 변경합니다. 

그런데 리덕스에서 어차피 reducer가 액션에 대한 실제 로직과 스토어의 state를 다 관리하고 있다면 왜 mapStateToProps가 필요한지 의문이 들 수 있습니다. 그 이유는 바로 화면에 컴포넌트를 렌더링해야 하기 때문입니다. 아무리 reducer가 state와 action을 총괄하고 있더라도 결국 화면에 그려지는 것은 컴포넌트들이고, 만일 컴포넌트들이 변경된 속성을 전달받지 못한다면 화면은 업데이트되지 않고 이전의 화면이 그대로 유지되게 될 것입니다. 따라서 action이 dispatch되어 변경된 속성은 계속 redux store에 묵혀두어선 안 되고, 컴포넌트가 담긴 컨테이너에 전달되어야 합니다. 즉, reducer는 스토어에 저장된 state에 dispatch받은 action을 적용해 new state를 만들어 내고, 이 업데이트된 state를 다시 컨테이너에 전달하는 것입니다.