리덕스 프로젝트 구조 - Dumb & Smart (Presentational 컴포넌트와 Container 컴포넌트의 분리)

리액트는 컴포넌트를 통해 UI를 이리저리 조합하여 잘 동작하게 하기 위해 만들어졌다. 항상 컴포넌트의 재사용을 고려하고, 이러한 패턴들에 대해 공부하고 효율적이면서 가독성 좋은 프로젝트를 만들어야한다 👻

 

 

 

 

 

프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 구조는 특히나 리덕스를 사용하는 리액트 프로젝트에서 자주 사용되는 구조이다. 이 구조는 리덕스의 창시자인 Dan Abramov가 고안했다.

 

 

생각해보면 얼마전에 만든 Todo List나  Pagination List 도 간단하지만 이 구조의 일부분을 무의식적으로 사용하고 있었다...! 물론 강의에서 그렇게 알려줘서 자연스럽게 사용한거겠지만

 

 

 

 

 

 

stateless functional component를 dumb(Presentational) component라고 하며, state를 관리하는 컴포넌트는 smart (Container) component라고 부른다. 

 

 

1) Presentational Component (DUMB)

- 오직 뷰 만을 담당하는 컴포넌트

- DOM element, 스타일을 가지고 있음

- 리덕스의 store 에 직접적인 접근 권한이 없으며 props로만 데이터를 가져올 수 있다.

- 대부분 state를 가지고 있지 않으며, 있다고 하더라도 UI에 관련된 것이다.

 

2) Container Component (SMART)

- 주로 내부에 DOM element가 직접적으로 사용되지 않음 (감싸는 용도 제외)

- 스타일을 가지고 있지 않음 (presentational component에서 정의되야 함)

- 리덕스에 직접적으로 접근할 수 있으며 주로 상태를 가지고 있다.

 

 

 

이 구조의 장점은?

 

UI쪽과 Data 쪽이 분리되어 프로젝트를 이해하기가 쉬우며 가독성에 좋다 . 또한 컴포넌트의 재사용률도 높여준다!

 

 

어떤걸 컨테이너로 만들어야할까?

• 페이지
• 리스트
• 헤더
• 사이드바
• 내부의 컴포넌트 때문에 props가 여러 컴포넌트를 거쳐야 하는 경우