디자인 패턴 - component 관련

Design Pattern

자주 사용하는 설계 패턴을 정형화 해서 이를 유형별로 가장 최적의 방법으로 개발할 수 있도록 정해둔 설계. 명확한 답은 없다.

생성 패턴

• 객체를 생성하는 것과 관련된 패턴으로, 객체의 생성과 변경이 전체 시스템에 미치는 영향을 최소화 하고, 코드의 유연성을 높여준다

구조 패턴

• 프로그램 내의 자료구조나 인터페이스 구조 등 프로그램 구조를 설계하는데 활용될 수 있는 패턴
• 클래스, 객체들의 구성을 통해서 더 큰 구조를 만들 수 있게 해준다

행위 패턴

• 반복적으로 사용되는 객체들의 상호작용을 패턴화한 것으로, 클래스나 객체들이 상호작용하는 방법과 책임을 분산하는 방법을 제공한다.

React Component 설계(atomic 방식)

• React로 컴포넌트를 설계할 때 가장 먼저 생각해봤던 방식은 UI 컴포넌트와 실제 기능을 구현하는 Container 컴포넌트의 분류이다.

• 기존에 웹을 개발할 때는 MVC 구조를 이용하여 model, view, controller 를 나누어 해당 구조에 맞게 개발을 설계하는 방식을 주로 이용하였습니다. 하지만 이 방식은 코드의 독립성이 낮아 재사용성이 힘들다는 단점이 있습니다. Component는 앱을 구성하는 최소단위로 알고 있습니다. component는 데이터를 이용하여 DOM을 부착시켜 웹에 출력 시킬 수 있는 함수입니다. 이처럼 함수를 component단위로 구성할 수 있기 때문에, 재사용성도 좋고 UI 및 디자인 적으로도 코드의 수정 및 관리가 간편하다는 장점이 있습니다.

• 출력이 되는 UI 컴포넌트와 이벤트, 로직, 예외 처리 등의 기능을 가진 컴포넌트로 나누면 보기가 쉬워지기 때문에 처음에는 되도록 그렇게 설계하려고 노력하였다. 하지만, 생각보다 기능이 많아질수록 이 패턴을 따르는 것이 코드량도 많아지고 개발 시간에 비효율적이라고 판단

• 그다음은 실제 기능의 크기에 따른 Container를 크기로 나누어 Page, Component, atom으로 나누어 설계하는 패턴을 선택하였다. 앱이나 웹 등은 page가 분류 단위이기 때문에, Page로 우선 나누게 되면 기능이나 UI를 시간상 빠르게 분류할 수 있었다.

• 그 후, atom 부분에는 자주 사용하는 태그나 작은 기능을 가진 컴포넌트를 넣고, Component부분에는 Page에 들어가는 UI나 로직별로 나누어 설계하였다.

• 이 패턴의 가장 큰 장점은 설계 시간이 최소화된다는 점이고, page, atom 단위의 확인이 가능하다는 점. 단점은 기능이 커지게 되면 코드량이 늘어나고 파악이 쉽지 않다는 점인 것 같다. 그런데도 시간상의 장점 때문에, 최근까지도 이 방법을 주로 채택하여 개발하였다.

atomic 방식에 대한 자세한 내용은 다른 게시글에 작성