container / presentation 컴포넌트

React 디자인 패턴

다른말로 폴더 구조로 실무에서 사용하는 방법중 하나이며, 다른 패턴으로는 atomic이 있다.

container / presentation

• 로직 수행 컴포넌츠 부분과 markup(jsx) ui를 보여주는 컴포넌트를 분리한 패턴
• 같은 state를 다른 container에게 props로 상태를 공유 할 수 있다.
• 로직수행, markUp이 다른 컴포넌트에서 하기 때문에 유지보수가 쉽고, 재사용성이 뛰어난데 특히, markup 변경에 매우 유연하다.

presentational

• 사용자가 직접 보고, 조작하는 컴포넌트 (ui와 관련)
• state를 직접 조작하지 않으며, container component가 내려준 prop의 함수에 의해 state를 변경한다.
• 상태를 거의 가지지 않으며, 상태를 가진다면 데이터에 관한것이 아닌 ui 상태에 관한 것.

container

• 어떻게 동작하는지, 어떤 로직을 수행하는지에 관련있다.
• markUp, 스타일을 사용하지 않는다
• 데이터와 데이터 조작에 관한 함수를 만들고 present component에 제공한ㄷ나.