[1] Container-Presenter

기능을 담당하는 부분(컨테이너)과 화면(JSX)을 보여주는 (프레젠터)부분을 분리하여 파일을 나누는 방법

• 개인적으로 추천하지 않는다. 코드가 분리되어서 오히려 알아보기가 어려워질수도 있다.

• Container쪽에 Presenter 컴포넌트를 import해서 사용한다.

(1) 장점

1. 기능과 화면을 분리함으로써 용도를 확연히 구분할 수 있다.

(2) 단점

1. Container에서 Presenter로 props를 번거롭게 넘겨주어야 하는 문제점이 있다.

2. props로 함수나 상태값을 번거롭게 넘겨주어야 하는데 만약에 그게 많다면 불편하다.

3. 기능과 화면이 분리되어서 한번에 코드를 보기 힘들다.

(3) 대안

Container와 Presenter를 합친 코드가 엄청 길지 않다면 1개의 파일로 모아서 사용해도 개인적으로는 문제가 없다고 생각된다. 하지만 만약 코드가 너무 길고 작은 컴포넌트로 분리가 되지 않는 상황일때만 분리해서 사용하는 것도 해볼만 하다고 생각된다.

[2] Atomic Design Pattern

여러개의 작은 단위로 쪼개서 사용을 하는 패턴방법이다.

• 개인적으로는 좋다고 생각하지만 명확한 기준점이 없어서 더 복잡하고 시간이 오래걸리는 작업이 될 수도 있다고 생각은 한다.

• 원자, 분자, 유기체 , 템플릿, 페이지 5단계로 구분해서 사용을 한다.

• 폴더명을 atomic, molecule 등으로 나누어서 사용한다고 하는데 그냥 적당히 구분이 될정도면 좋다고 생각한다.

• 여러가지의 요소들을 고려하면서 설계를 해야하므로 어려울 수 있다.

(1) 설명

1. atom(원자)

• 여러가지의 state에 반응할 수 있어야 하므로 많은 속성을 포함하고 있어야 한다.

• 공간(마진,패딩 등)과 관련되 요소를 가지면 안된다.

2. molecule(분자)

• 원자들을 여러개 합쳐놓은 기능

• 분자에서 원자의 위치를 조정한다.

3. oragnism(유기체)

• 분자와 원자가 합쳐진 단위이다.

• 분자나 원자의 위치를 잡아준다,

4. template(템플릿)

• style링을 하지 않고 그리드와 같이 가이드라인을 잡아주는데 사용한다.

5. page(페이지)

• 템플릿을 이용해서 화면을 구성한다.

(2) 장점

• 컴포넌트의 크기를 작게 쪼개서 보관하여 재사용성이나 필요한 기능들만을 추출하여 사용이 가능하다는 장점이 존재한다.

(3) 단점

• 명확하게 어떤것이 분자고 원자고 유기체 등등인지 구분하는 기준점이 없다는 것이다.

• 너무 많은 파일들이 생겨서 정리를 제대로 하지 못한다면 만들어 놓고서도 사용을 못하는 경우가 있을 수도 있다.

(4) 대안

• 명확하게 기준점이 없으므로 그냥 만들어 두고 아무데나 보관해 두는 것이 좋다. 처음에 아토믹 디자인 패턴으로 설계를 해보았을 때 고민을 해보았는데 그냥 만드는 것을 추천한다.