[처음 만난 리덕스] 7. Container

Container

Redux의 공식 개념은 아니다.

Redux를 React에 연동했을 때 사용하는 개념

 

Container Component의 준말로,

Redux의 일부 state와 dispatcher를 포함하는 리액트 컴포넌트.

(= Redux와 연결되어 있는 리액트 컴포넌트)

 

 

 

react-redux

React와 Redux를 연동하기 위해 사용하는 공식 바인딩 라이브러리

 

 

- Binding Library (= Binding)

: 어떤 라이브러리를 특정 환경에서 사용하기 위해서,

그 환경과 라이브러리를 중간에서 묶어주는 역할을 하는 라이브러리

 

 

react-redux의 주요 API

- Provider

: 하위 컴포넌트들이 Redux Store에 접근할 수 있게 해줌

 

 

 

 

- mapStateToProps()

: Redux state를 타겟 리액트 컴포넌트의 props로 연결시켜주는 역할을 하는 함수

 

🚨 주의: 컴포넌트에서 꼭 필요한 state만 추출해서 전달해야 함!
(필요없는 재렌더링은 성능에 지장을 줄 수 있기 때문)

 

 

 

 

- mapDispatchToProps()

: Redux dispatch를 타겟 리액트 컴포넌트의 props로 연결시켜주는 역할을 하는 함수

 

함수가 리턴하는 객체가 리액트 컴포넌트의 props로 전달됨!

 

 

- connect()

:Redux와 React 컴포넌트를 연결시켜 주는 역할

*그냥 호출해서 사용하면 된다.

 

Wrapper Function을 리턴 (어떤 리액트 컴포넌트든지 Container로 만들어 주는 함수)

 

 

 

🚨 주의: connect() 된 컴포넌트를 사용해야 함!

 

 

 

Redux와 React 연동하기

1. Redux Store 생성
2. Redux Action Type 정의 및 Action Creator와 Reducer 구현
3. React Component 구현
4. Container 만들기 (*실제 Redux와 React를 연결하는 과정)
   1. mapStateToProps()
   2. mapDispatchToProps()
   3. connect()
5. Provider를 사용해 store 전달하기 (Higher Order Component, HOC)
6. Container Component 렌더링