번역)Presentational and Container Components

Presentational and Container Components

 

	Presentational	Container
기능	어떻게 보여지는가	어떻게 동작하는가
Redux와 연관성	없음	있음
Read data	Props에서 data를 읽는다	Redux의 State에 접근한다. (useSelector)
Change data	props에서 콜백을 호출	Redux Action

 

리액트에서 컴포넌트는 상태관리, DOM관리, 이벤트 관리 등 다양한 역할을 하는데, 컴포넌트가 규칙없이 배치되어 있다면 가독성이 떨어지고 관리가 어려워진다. 

 

리액트에서 컴포넌트를 presentational, container 로 나누는 것은 재사용성과 유지보수성을 향상시킬 수 있다.

 

---

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0d

위 글을 번역해보았다.

 

한국말로 바꾸었을때 어색하지 않도록 의역을 조금 하였다.

---

Presentational Components

• 어떻게 보이는가?
• 내부에 Presentational Component와 Container Component 모두 가질 수 있고, 보통 DOM마크업과 자체 스타일을 갖고있다.
• 종종 this.props.children을 통해 다른 컴포넌트들을 관리할 수 있다.
• 어플리케이션의 나머지 부분과 독립되어 있다.
• 데이터를 건네받거나 변경하는 방법에 관여하지 않는다.
• props를 통해 데이터, 콜백을 받는다.
• UI상태를 관리하기 위한 State만 갖는다.
• state, lifecycle, 성능 최적화가 필요 없다면 functional components로 사용된다.
• ex) 페이지, 사이드바, 스토리, 유저정보 등등

Container Components

• 어떻게 동작하는가?
• presentational components와 container components를 둘다 갖고 있다. 감싸는 divs를 제외하고는 DOM 마크업을 갖고 있지 않다. style도 없다.
• presentational components나 다른 컴포넌트에 데이터와 행동?(behavior)를 제공한다.
• Flux actions를 호출하고, Flux action을 presentational components에 콜백함수로써 제공한다.
• 데이터source 역할을 하기 때문에 state가 자주 변경된다.
• 직접 만들어지기보다는 보통 React Redux의 connect(), Relay의 createContainer(), Flux Utils의 Container.create()와 같은 higher order components를 사용해서 만들어진다.

---

장점

• 이 방법을 사용함으로써 app이나 UI에 대한 이해도가 높아진다.
• 재사용성이 좋아진다. 완전히 다른 state로 같은 presentational component를 사용할 수 있다. 그리고 나중에 재사용될 수 있는 container components 로 바꿀수도 있다.
• Presentational component를 싱글페이지에 놓으면 디자이너가 App의 로직에 손대지 않고도 변동성을 '콕 찝어 비틀수 있게(tweak)' 할 수 있다.
• 이 방법을 사용하면 사이드바, 페이지, 컨텍스메뉴같은 레이아웃 컴퍼넌트를 쏙 뽑아서 사용할 수 있고, this.props.children을 사용할 수 있게 해준다.(동일한 마크업이나 container component에 있는 레이아웃을 복제하지 않아도 된다.)

 

---

언제 Container component 를 넣어야할까?

우선 당신에게 앱의 기초를 세우는 과정에선 presentational components 사용하는걸 제안한다. 앱을 만들다보면 결국 당신은 너무 많은 props를 중간 컴포넌트에 내려보내고 있단걸 깨닫고, 그걸 알았을때 당신의 앱에는 props를 사용하지도 않으면서 그냥 내려보내기만 하는 컴포넌트들도 있을 것이고, 어떤 중간 컴포넌트들은 자식 컴포넌트들에게 더 많은 데이터가 필요할때마다  재구성 될 것이다.

바로 이때가 Container components를 넣기 좋은 타이밍이다.

 

당신은 트리 중간에 있는 관련없는 컴포넌트에 부담을 주지 않으면서 데이터나 props를 leaf 컴포넌트에 보낼 수 있다.

 

계속 리팩토링중이니깐 처음부터 바로 시도하지는 마라. 당신이 이 패턴들을 실험할때, 당신은 언제 container component를 뽑아낼지 아는 직감을 키우게 될 것이다. 마치 당신이 언제 함수를 뽑아오는걸 아는 것 처럼 말이다.