Programming/React
React - Presentational 컴포넌트 & Container 컴포넌트
besforyou999
2023. 10. 14. 21:58
서론
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