10. container-presenter 패턴과 Atomic 패턴

Presentational and Container

Presentational and Container이란?

자바스크립트(기능)적 부분과 JSX(HTML&CSS)로 파일을 나누어서 이를 import와 export를 통해서 연결해줘서 사용하는 방식의 폴도 구조를 말한다. Conatiner는 자바스크립트 부분을 Presenter는 JSX 부분을 담게 된다.

 

Presentational and Container의 장점

Presentational and Container을 도입하게되면 그저 index.js 파일로만 page를 만들 때보다 이점을 얻을 수 있다.

 

1. 컴포넌트간의 의존도가 낮아져서 컴포넌트들의 재사용성이 높아진다.

2. 기능과 UI가 명확하게 나눠져서 파일의 가독성이 높아진다.

 

Presentational and Container의 단점

 단점이라고 하기에는 뭣하지만 나중에 개발된 Hook이 클래스형 컴포넌트 없이도 쉽게 Presentational and Container의 역할을 대신할 수 있게 되었다.

 

Presentational and Container의 데이터 흐름

Presentational and Container은 데이터의 흐름이 단방향이다. 그 이유는 부모 컴포넌트가 자식 컴포넌트에게 props라고 하는 객체를 전달하는 형식으로 데이터를 전달하기 때문에 부모에서 자식으로만 데이터의 전달이 일어나기 때문이다.

 

props drilling

props drilling은 부모의 부모 컴포넌트(즉 조부모 컴포넌트)가 부모 컴포넌를 통해서 데이터를 손자 컴포넌트로 보내줘서 이를 손자 컴포넌트가 사용하는 것을 말한다.

 

 

 

 

Atomic 패턴

atomic 패턴은 소스코드를 아주 작은 컴포넌트 단위로 먼저 쪼개는 방법으로 이렇게 하면 컴포넌트의 중복을 최소화할 수 있다는 장점이 있습니다.

위의 그림과 같이 Atoms(원자), Molecules(분자), Organisms(유기체), Templates(템플릿), Pages(페이지) 이렇게 5개의 단계로 폴더를 나누어서 컴포넌트를 관리하게 되며 일관된 UI를 만들고 유지보수성을 향상시킨다.

 

 

Atoms

Atoms(원자)는 버튼, 인풋 등의 가장 작은 컴포넌트를 나타낸다.

 

Molecules

Molecules(분자)는 2개 이상의 원자 컴포넌트들로 구성된 컴포넌트를 말한다.

 

Organisms

Organisms(유기체)은 분자들을 모아서 만든 컴포넌트들이다.

Templates

Templates(템플릿)은 Organisms을 모아서 만든 컴포넌트이다.

Pages(페이지)

실제 페이지를 구성하는 컴포넌트로 복수의 템플릿을 사용하여 컴포넌트를 구성합니다.

 

 

위와 같이 복수의 하위 컴포넌트가 모여서 상위 컴포넌트를 구성하는 형태를 가진다. 

 

 

Atomic의 장점

1. 재사용 가능한 설계

2. 리액트의 렌더링 최적화에 효과적이다.

3. CSS의 관리가 쉬워진다.

4. 디자이너들에게도 많이 알려진 패턴으로 협업 시 유리하다.

 

Atomic의 단점

1. 컴포넌트들이 많아짐에 따라 관리 및 유지, 보수가 어려워집니다.

2. 원자, 분자 컴포넌트의 복잡성이 증가하게 된다.

3. 아토믹 패턴에 맞춘 코딩으로 작업시간 증가