Redux 기초 개념 정리(4/4) - Container

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다.

지난 글에 이어 이번 글에서는 Redux의 Container에 대해서 알아보도록 하겠습니다.

---

Container는 컴퓨터공학 내에서도 여러가지 의미로 사용되기 때문에 혼동하지 않는 것이 중요합니다.

영어 단어 Contain은 무언가를 포함한다는 뜻을 갖고 있습니다.

마찬가지로 Redux의 Container도 무언가를 포함하는 것을 나타내는데,

그 무엇은 바로 Redux의 state와 dispatch입니다.

 

state가 없는 리액트 컴포넌트를 그냥 껍데기라고 한 번 해보겠습니다.

이 컴포넌트에 실제 사용자가 원하는 데이터를 표시하기 위해서는,

어딘가에서 데이터를 가져다가 집어넣어줘야 하겠죠.

여기에서 데이터는 바로 state를 의미합니다.

 

컴포넌트에 state를 선언해서 사용할 수도 있지만,

중앙화 된 하나의 저장소(Store)에 state들을 모아놓고 사용할 수도 있습니다.

후자처럼 할 경우 사용하는 것이 바로 Redux같은 상태 관리 라이브러리입니다.

위에서 굵게 표시한 부분처럼 실제 데이터를 갖고 있는 Redux Store와 껍데기를 담당하는 리액트 컴포넌트를 연결하는 과정을 connect라고 합니다.

말 그대로 연결하는 것이죠.

 

컴포넌트가 Redux Store와 연결(connect)되면,

컴포넌트는 Redux Store에 있는 데이터 중에서 필요한 state들만 꺼내서 사용할 수 있습니다.

또한 state뿐만 아니라, Action을 실행시키기 위한 dispatch함수들도 연결할 수 있습니다.

그리고 이렇게 Redux Store에 연결된 리액트 컴포넌트를 바로 Container라고 부릅니다.

 

정리하면, Redux Container는 Redux에 있는 state, dispatch들을 가져다 사용할 수 있는 리액트 컴포넌트입니다.

참고로 mapDispatchToProps, mapStateToProps라는 이름의 함수를 사용하며,

이 때 state, dispatch는 해당 컴포넌트의 props로 전달됩니다.

---

이번 글까지 Redux의 기초 개념들을 살펴보았습니다.

이해가 되지 않는 부분이 있다면 다시 한 번 쭉 읽어보면서 학습하시기 바랍니다.

감사합니다.