[React] 컴포넌트 디자인 패턴 - container / presenter 패턴

리액트 디자인 패턴 (폴더구조 체계화)

컴포넌트를 쪼개는 방식에 정해진 표준이 있는 것은 아니다. container/presenter 패턴, atomic 패턴 등 여러가지 방법이 있으며 회사나 팀마다 다른 방식을 사용한다. 오늘은 대중적인 디자인 패턴 중 하나인 container / presenter 패턴에 대해 알아보자.

 

Container / Presenter

Container : 순수 스크립트 영역으로 페이지의 동작을 담당한다.

Presenter : JSX로 작성된 UI 등 시각적으로 보이는 영역을 담당한다.

 

한 페이지 컴포넌트를 기능별로 쪼갠 뒤 import / export 로 해당 function을 불러와서 연결해주면 된다. 이 때 import 하는 쪽이 부모, export 하는 쪽이 자식 컴포넌트가 된다. 리액트는 단방향 데이터 구조를 가지고 있기 때문에 함수나 변수를 부모 > 자식 방향으로만 전달해줄 수 있다. (props 사용)

 

단방향 / 양방향 데이터 흐름에는 각각 장단점이 있다. 리액트는 단방향 구조이기 때문에 흐름을 파악하기 쉽고 유지보수가 편하다. ( 양방향 흐름을 가지고 있는 예시에는 앵귤러가 있다.)

 

나는 지금 진행중인 프로젝트 폴더를 이런 식으로 쪼갰다.

나는 이런 식으로 컴포넌트간의 부모, 자식 관계를 설정했다.