Container Presentational Pattern

코드를 한 파일에 전부 작성하면 굉장히 길어져 가독성이 떨어져 오류가 생겨도 찾기 힘들고 특히 협업을 할 때 효율성이 떨어질 것이다.
이를 방지하지 위해 코드의 역할에 따라 파일을 나누어 놓는 것을 Container/ Presentational 패턴이라고 한다.
React 코드를 살펴보면 JS(기능)부분과 JSX(UI)부분으로 나누어진다.

export default function Example(){
const examples = () =>{
//JS(기능) 부분//
};
return (
//JSX(UI) 부분//
);
};

이 때, JS부분을 container 파일로, JSX부분을 presenter 파일로 나누어 관리하는 것이 바로 Container/ Presentational 패턴이다. 여기에 query나 style component도 분리시킨다면 4개의 파일로 나누어 관리하게 된다.