[React] container-presentation

✅ container-presentation 패턴을 사용하는 이유

• 리액트의 컴포넌트는 상태, DOM, 이벤트 등을 모두 관리할 수 있다.

• 리액트의 생태계에서 자유롭게 컴포넌트를 활용할 수 있다는 의미지만 컴포턴트 간의 의존도가 높아지는 것을 경계하지 않는다면 추후 어플리케이션이 비대해졌을 때 코드 재사용이 어렵다.

• 컴포넌트 내에서 추가저긍로 레이어를 나눠 의존도를 낮춰줄 필요를 느낌

• 로직과 view를 분리하기 위한 방법으로 등장한 것이 container-presentation 패턴이다.

✅ presentational component

• 사용자가 직접 보고, 조작하는 컴포넌트

• state를 직접 조작하지 않으며, container component가 내려준 prop의 함수에 의해 state를 변경한다.

• useState, useCallback, dispatch등 state관련된 훅이 하나도 없다.

✅ container component

• 어떻게 동작하는지, 어떤 로직을 수행하는지에 관련있다.

• markup을 사용하지 않는다. 스타일을 사용하지 않는다.

• 데이터와 데이터 조작에 관한 함수를 만들고 present component에 제공한다.