[React] Container Components From Presentational Components

해당 포스트는 코드아카데미의 React 101 강의의 필기입니다.

Container / Presentational 컴포넌트 분리 - 프로그래밍 패턴

💡 더 깔끔한 프로그래밍 패턴
: 한 컴포넌트가 너무 많은 역할을 담당하고 있는 경우 이를 적절히 나누어줘야 한다

리팩토링 필요성 판단

한 컴포넌트가 계산/로직과 동시에 렌더링/보여주기의 역할까지 담당하고 있다면, 이를 적절히 나누어줄 필요성을 느낄 수 있다.

⚙️ Container Component

컴포넌트에서 function/logic을 담당하는 부분들 (state, calculation 등)을 container component에 담아준다.
렌더링 부분에는 presentational component를 호출하며 props만 넘겨준다.
ex) containers/GuineaPigsContainer.js

🎨 Presentational Component

모든 로직들을 container component에 옮겨담고, 남아있는 컴포넌트.
오로지 HTML문법처럼 생긴 JSX만을 담고 있어야 한다.
로직/계산/함수/state 가 전혀 없어야한다.
ex) components/GuinewPigs.js

두 컴포넌트의 연결

1. Presentational Component를 export하여 Container Component에서 import한다.
2. Container Component의 렌더링 부분은 Presentational Component로 대체한다.
3. 적당한 props를 준다.
4. Container Component를 최종 렌더링 한다.