[ Redux ] - Presentational Component / Container Component

승진·2019년 9월 7일
1

Presentational Component

  • 상태를 갖지 않으며 부모로부터 props을 통해 데이터를 전달받아서 사용한다. 오로지 시각적인 부분만 담당한다. 이벤트 핸들러를 등록하는 정도의 기능을 갖추고 있다. 예외적으로 아주 약간의 상태를 가질 수도 있다.

  • Styled Components는 모두 Presentaional Component이다.

  • 데이터나 상태에 관해 알고 있는 것이 거의 없어 결합도가 낮기 때문에 재사용성이 높아진다.

Container Component

  • 상태를 갖고 있으며, 비동기 작업을 수행하면서 계속적으로 상태가 변경될 수 있다.

  • Redux 세계에서는 상태를 Redux 안에서 관리하기 때문에 Presentation Component는 Redux와 직접 연결되는 부분이 없다. Container Component가 React 세계를 Redux와 연결한다.

  • React Redux는 우리가 직접 구현하기는 힘든 여러가지 성능 최적화를 해주기 때문이다. 이런 이유에서 Container 컴포넌트를 직접 작성하지 않고 react-redux가 제공해주는 connect()함수를 사용해 container 컴포넌트를 생성하는 것이다.


Redux의 상태가 변경될 때마다 Presentational 컴포넌트를 다시 렌더링하려면 Container 컴포넌트로 포함해야 한다. 이렇게 함으로써 Redux에 액션이 dispatch되어 상태가 변경될 때마다 Container 컴포넌트가 Presentational 컴포넌트에 다른 prop을 전달할 수 있다.

react-redux는 스토어에 저장되어 있는 상태가 변경될 때(dispatch 될 때)마다 매번 prop을 새로 전달해주는 연결 고리 역할을 한다.

Container 컴포넌트는 Presentational 컴포넌트에게 Redux 안의 상태를 어떤 prop으로 내려줄 지 정의할 필요가 있다. mapStateToProps와 mapDispatchToProps가 이 역할을 담당한다.

mapStateToProps는 React의 상태가 아닌 Redux의 상태를 인자로 전달받는 함수이다. Redux 내부의 state와 prop을 어떻게 연결할 지 정의한다.

컴포넌트 내부에서 상태를 보여줄 방법 뿐만 아니라 상태를 변경할 수 있는 방법도 필요한데, Redux 세계에서 상태를 변경하는 방법은 액션을 dispatch하는 방법이 유일하다. 이를 위해 Container 컴포넌트는 Presentational 컴포넌트에게 스토어에 액션을 dispatch할 콜백을 전달할 필요가 있는데, 이 역할을 하는 것이 connect() 함수의 두 번째 인자로 전달되는 mapDispatchToProps이다. 이 함수는 스토어에 액션을 dispatch하는 함수를 인자로 전달받는다.

결국 Redux 세계와 React 세계를 연결하는 역할을 하는 것이 바로 mapStateToProps와 mapDispatchToProps인 것이다.

mapStateToProps와 mapDispatchToProps는 스토어의 상태가 변경될 때마다 호출되고, 이에 따라 Presentational 컴포넌트에 새로운 Props가 전달된다.

Container 컴포넌트는 connect() 함수를 통해 생성한다. 이것이 Redux가 컴포넌트를 생성하는 방법이다. 우리가 function, class 키워드를 통해 정의하는 컴포넌트의 대부분은 Presentational 컴포넌트이고 Container 컴포넌트는 connect() 함수를 통해 생성한다.

profile
Front-end 개발 공부일지

0개의 댓글