[React] container and presenter pattern

1. container and presenter patton 이란

- React 디자인 패턴 중의 하나로 하나의 페이지 컴포넌트를 기능과 UI구현의 컴포넌트로 나눠 작성하는 것이다.

- export와 import로 부모 컴포넌트와 자식 컴포넌트를 연결하며 최종 부모 컴포넌트는 _app.js의 App이다.

 

presenter component (= presentational component)

- JSX 가 담겨있는 컴포넌트로 UI 부분을 구현한다.

- container component가 전달하는 prop를 사용한다.

 

container component

- 자바스크립트 로직이 담겨있는 컴포넌트로 기능 부분을 구현한다.

- 마크업이나 스타일을 사용하지 않는다.

 

import와 export 

기능별로 컴포넌트를 나누었지만 실행할 때는 하나의 페이지에서 합쳐져서 실행되어야 한다.

즉, container component를 pages 내부 index에 import 해주어야 제대로 된 하나의 페이지가 보인다.

 

2. 리액트의 데이터 전달 방식 props

- props를 사용하여 폴더 간 데이터를 주고받을 수 있다.

- 위의 코드에서도 알 수 있듯이 리액트는 단방향(부모 컴포넌트가 자식 컴포넌트에게) 으로 내부 변수와 함수를 전달한다.

반대로 자식 컴포넌트에서 부모 컴포넌트로의 전달은 불가능하다.

단방향 구조이므로 에러를 찾아내기가 더 쉽고, 흐름을 파악하기 수월하다.

3. 요약

- container and presenter 디자인패턴을 적용하여 체계적인 폴더구조를 만들 수 있다.

- export와 import를 통해 component 간 부모-자식 관계 파악에 용이하며 코드가 간결해진다.

- 컴포넌트별로 기능이 동작하므로 리팩토링과 유지보수에 용이하다.