React - Presentational 컴포넌트 & Container 컴포넌트

목차

• 서론
• Presentational 컴포넌트
• Container 컴포넌트
• 이 방식의 장점

 

 

 

 

서론

 

React에서 컴포넌트를 Presentational 컴포넌트와 Container 컴포넌트로 나누어 작성할 수 있다. 

 

Presentational 컴포넌트는 무엇이고, Container 컴포넌트는 무엇일까?

 

또 이렇게 분리했을때 장점이 무엇일까?

 

 

Presentational 컴포넌트

 

UI 담당하는 컴포넌트. 사용자에게 어떻게 보일지에 집중한다.

 

특징으로는

 

• 내부에 presentational 컴포넌트와 container 컴포넌트를 가질 수 있다.
• 개인 스타일(css, Markup)을 가지고 있다.
• store, Flux actions 등 앱의 다른 부분에 의존하지 않는다.
• 데이터를 조작하지 않는다.
• props를 통해 데이터 혹은 콜백함수를 전달받는다.
• 대부분 상태(state)를 갖지 않는다. ( 갖는다면 데이터 대신 UI 상태)
• 상태, 생명주기 메소드, 성능 최적화가 필요하지 않는 경우 함수형 컴포넌트로 작성

 

예 : 페이지, 사이드바, 리스트

 

 

Container 컴포넌트

 

내부 로직을 담당하는 컴포넌트. 앱의 동작에 집중한다.

 

특징으로는

 

• 내부에 presentational 컴포넌트와 container 컴포넌트를 가질 수 있다.
• 개인 스타일(css, Markup)을 가지고 있지 않다.
• 다른 container 혹은 presentational 컴포넌트에 데이터, 행위를 전달하는 역할
• Flux action을 호출해 presentational 컴포넌트에 callback으로 전달
• 대부분 상태를 가지고, 데이터 전송 역할 담당

 

예 : 사용자 페이지, 팔로워 사이드바, 팔로워 목록

 

 

이 방식의 장점

 

• UI와 앱 로직이 분리되어 코드 이해가 수월
• 재사용성 증가. 같은 presentational 컴포넌트에 데이터만 다르게 전달해 다양하게 활용 가능.
• 디자이너가 앱 로직을 건들지 않고 presentational 컴포넌트만 조작 가능해져 협업 쉬워짐.

 

결론적으로 UI와 데이터 조작 부분을 분리해 코드의 가독성과 재사용성을 높일 수 있다.

 

 

 

출처 

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

https://fe-churi.tistory.com/34