처음 만난 리덕스 (Redux) 문서
7.1 Container
먼저 Container의 개념에 대해 알아보겠습니다.
사실 Container는 Redux의 공식 개념은 아닙니다.
그렇다면 언제 사용되는 개념일까요?
Container는 바로 Redux를 리액트에 연동했을 때 사용하는 개념입니다.
앞 장에서 배운 것처럼, 애초에 Redux는 리액트만을 위해서 개발된 상태관리 라이브러리가 아니라 독자적으로 사용할 수 있는 JavaScript 라이브러리입니다.
그래서 Redux에는 Container라는 개념이 없지만, Redux를 리액트에 연동해서 함께 사용할 경우에는 Container라는 개념이 등장하게 됩니다.
그럼 이제 Container의 정의에 대해서 한 번 알아볼까요?
먼저 영어 단어 Contain은 우리말로 포함하다라는 의미를 가집니다.
Contain + er = Container
그렇다면 Contain 뒤에 er을 붙인 단어인 Container는 무언가를 포함하는 것이라는 의미가 되겠죠.
하지만 이것만 봐서는 Container가 도대체 뭔지 감이 잘 안 올 겁니다.
여기서 Container의 본질에 대해서 한 번 짚고 넘어가도록 하겠습니다.
사실 Container는 Container Component를 줄여서 Container라고 부르는 것입니다.
그리고 여기서 컴포넌트는 리액트 컴포넌트를 의미합니다.
그래서 결국 Container의 본질은 리액트 컴포넌트이며, 무언가를 포함하는 리액트 컴포넌트라는 의미가 됩니다.
그렇다면 여기서 포함하고 있는 무언가 라는게 무엇일까요?
그것은 바로 우리가 지금 배우고 있는 Redux입니다.
그런데 이렇게만 쓰면 리액트 컴포넌트가 Redux 전체를 다 포함하는 것처럼 느껴질 수 있습니다.
마치 이 그림처럼 말이죠.
하지만 이렇게 이해하면 잘못된 것입니다.
Container에서 Redux를 포함한다는 의미는 Redux 전체를 포함한다는 의미가 아니라, Redux의 일부 state와 dispatcher를 포함한다는 의미에 가깝습니다.
그리고 Redux의 일부에 대해서 포함하고 있다는 의미는 Redux와 연결되어 있다고 표현할 수도 있습니다.
그래서 Container를 한 마디로 정의하면 Redux와 연결되어 있는 리액트 컴포넌트가 됩니다.
Redux와 연결됨으로써 Redux에 대해서 알고있는 리액트 컴포넌트라는 뜻이죠.
Container의 정확한 정의를 그림으로 나타내면 이 그림과 같습니다.
먼저 이렇게 Redux와 리액트 컴포넌트들이 있습니다.
지금 상태에서 이 컴포넌트들은 일반적인 컴포넌트입니다.
그런데 이렇게 각각의 컴포넌트가 Redux와 연결되면, Redux와 연결된 컴포넌트. 즉, Container가 됩니다.
Container의 개념을 나타낸 이 그림을 머릿 속에 잘 기억해두시기 바랍니다.
https://github.com/reduxjs/redux/issues/756#issuecomment-141683834
사실, Container라는 개념은 어딘가에 문서화되어 정리되어 있지는 않습니다.
다만 위 그림처럼 리액트 핵심 개발자이자 Redux를 만든 Dan Abramov가 2015년에 GitHub에 남긴 글에서 component와 container의 개념에 대해서 알 수 있습니다.
이 글을 보면 Component는 Redux에 대해서 모르는 일반적인 리액트 컴포넌트를 의미하고, Container는 Redux에 대해서 알고 있는. 즉, Redux와 연결된 리액트 컴포넌트를 의미한다고 설명하고 있습니다.
그래서 Component는 껍데기만 있는 dumb components와 같다고 하고 있으며, Container는 smart components와 같다고 하고 있습니다.
보시는 것처럼 많은 개발자들이 이 정의에 공감을 하였고, 그래서 Container라는 개념이 널리 보편적으로 사용되게 되었다고 보면 됩니다.
마지막 업데이트: 2023년 07월 14일 00시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.