복잡하게 연결하고 임포트(import)할 필요없이 한 페이지에 코드를 적으면 되는데 왜 container-presenter 패턴으로 나누어 사용할까 ?
기본적으로는 가시성과 효율성의 증대가 목적이 되겠지만 효율성의 다른 측면에서 본다면 이렇게 나누어 만들어놓은 컴포넌트들은 재사용이 가능하기 때문이다.
예를들어 중고거래 사이트의 FE를 만들었다고한다면 여러가지 페이지로 나뉘겠지만 그 중에서도 게시글 등록과 수정 페이지가 있을 것이다.
상황1) 수정, 등록 페이지를 각각 index로 잡아 만들었을 경우.
시즌에 따라 페이지 스타일이 바뀔때마다 개발자는 각 페이지의 CSS 등의 상세 설정을 바꿔야하고 제대로 작동하는지에 대한 검증 또한 페이지별로 진행해야 한다.
상황2) 게시글 컴포넌트를 만들고 수정, 등록 페이지에서 임포트해서 사용하는 경우.
상세 설정을 변경하라는 요청이 들어와도 기본이되는 게시글 컴포넌트를 수정해주는 것만으로 수정, 등록 페이지를 모두 바꿔줄 수 있다.
예를든 상황이지만 이 밖에도 각 페이지마다 있는 댓글 입력창의 너비를 바꿔준다던가하는 짜잘한 경우에도 그 효율성은 차이가 날 수밖에 없으며 새로운 페이지를 추가하거나 페이지마다 광고배너를 한칸 추가하는 등 수정 작업에서도 기존에 만들어둔 배너 컴포넌트의 태그만 한줄 추가하면 되기 때문에 코딩을 할 때 재사용성을 염두에 두어야 한다.
컴포넌트를 사용해 임포트 해주는 경우 부모 컴포넌트의 기능(함수)은 꼭 props를 통해 자식 컴포넌트에 전달하여 사용해줄것.