더북(TheBook)

13.1.9 CounterContainer 컴포넌트 생성

 

컨테이너 컴포넌트를 만들 차례입니다. 컨테이너 컴포넌트에는 스토어가 연동되어 있습니다. react-redux 라이브러리의 connect 함수를 사용하여 컴포넌트를 스토어에 연결시킵니다.

connect 함수에는 파라미터가 세 개 들어가는데요.

connect([mapStateToProps], [mapDispatchToProps], [mergeProps])

 

각 파라미터는 선택이므로 불필요하다면 생략해도 됩니다. 이 파라미터들은 함수 형태며, 컴포넌트에서 사용할 props를 반환합니다. 각 파라미터마다 용도가 조금씩 다른데요.

mapStateToProps: store.getState() 결과 값인 state를 파라미터로 받아 컴포넌트의 props로 사용할 객체를 반환합니다.

mapDispatchToProps: dispatch를 파라미터로 받아 액션을 디스패치하는 함수들을 객체 안에 넣어서 반환합니다.

mergeProps: statedispatch가 동시에 필요한 함수를 props로 전달해야 할 때 사용하는데, 일반적으로는 잘 사용하지 않습니다.

 

connect 함수를 호출하고 나면 또 다른 함수를 반환합니다. 이때 반환하는 함수의 파라미터로 리덕스에 연결시킬 컴포넌트를 넣으면 mapStateToPropsmapDispatchToProps에서 정의한 값들을 props로 받아 오는 새 컴포넌트를 만듭니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.