합성 컴포넌트를 통한 효율적인 컴포넌트 설계

"중복된" 컴포넌트 작성이 아닌, 컴포넌트 내 "점점 늘어나는 조건 처리" 없이

하나의 컴포넌트로 여러 layout들을 관리하며 동시에 코드의 가독성을 확보하고 원활한 유지 보수를 할 수 있는 컴포넌트를 설계하기 위한 내용입니다.

 

디자인 시안을 전달 받고 컴포넌트를 설계하는 과정 중, 아래와 같은 디자인 시안을 마주하게 되었습니다.

아래의 디자인 샘플들은 거의 유사한(혹은 동일한) 모델을 기반으로 화면을 구성하는데, 화면 내 표시되는 곳에 따라 레이아웃의 세밀한 차이가 있습니다.

 

cf) 컴포넌트 예시

 

구현 초기 단계에서는 이러한 컴포넌트를 구현하기 위해 아래와 같은 생각을 하였습니다.
'하나의 컴포넌트 내에서 어떤 화면인지를 알려주는 props를 넘겨 if-else 와 같이 조건을 구분하여 화면을 렌더링하면 어떨까' 

 

하지만 이러한 방식은 아래의 한계들이 있음을 생각하게 되었고, 다른 방식으로 컴포넌트를 설계하게 되었습니다.

1. 새로운 디자인이 추가될 때 마다, 이러한 조건 처리를 매번 추가해줘야 하는 한계가 있다.
2. 다른 사람이 새롭게 맡아 개발할 경우, 컴포넌트 코드에 대한 이해를 직관적으로 하기 어렵고, 방대한 양의 로직을 이해하기에 큰 에너지가 소요된다.

 

이러한 상황에 대응할 수 있는 컴포넌트를 만들기 위해 여러 블로그들을 조사하다 아래의 두 블로그의 관점과 기술을 가지고 다시금 컴포넌트를 만들게 되었습니다.

 

1. https://jbee.io/web/components-should-be-flexible/

변경에 유연한 컴포넌트

2. https://fe-developers.kakaoent.com/2022/220731-composition-component/

합성 컴포넌트로 재사용성 극대화하기 | 카카오엔터테인먼트 FE 기술블로그

 

두 블로그를 통해 결론적으로 뽑은 관점은 아래와 같았고 해당 관점으로 컴포넌트를 설계하게 되었습니다.

1) 디자인 시안에 대한 추상화

2) 다양한 layout을 커버할 수 있는(유연하게 대처할 수 있는) 컴포넌트

 

 

위 블로그 중 첫 번째 블로그를 읽으면서

다양한 상황에 대응할 수 있도록 컴포넌트를 추상화하여 앞으로 펼쳐질 상황들을 유연하게 대처할 수 있는 방식으로 작업의 방향을 잡게 되었습니다. 

 

다시 말해 위 컴포넌트 예시들에서 절대로 변하지 않을 부분(공통되는 layout)을 뽑아내는 작업을 진행하여 컴포넌트의 구성을 총 3부분(시간 영역, 환자 정보 영역, 기타 영역)으로 추상화를 할 수 있었습니다. 각각의 영역에 내에서는 여러 가지 정보들이 조합되 차별적인 layout이 나타날 수 있지만, 이 큰 범주는 순서가 바뀌지 않고 생략되지도 않는, 곧 앞으로 마주할 여러 가지 컴포넌트들의 모습에서도 기본적으로 나타날 것들임을 보장할 수 있게 되었습니다.

 

 

이후 2번째 아티클을 통해 추상화된 컴포넌트를 구현하는 작업을 진행하였습니다. 각각의 영역들 내에서 조합될 수 있는 layout의 형태를 미리 선언해두어 사용하는 시점에 필요에 따라 layout의 형태를 유연하게 가져갈 수 있도록 하였습니다.

 

다시 말해 위 컴포넌트 예시에서 시간 영역 내에서는 인덱스, 시간 데이터 순으로 나타날 수 있는데, 이 데이터들을 선택적으로 표시할 수 있도록 컴포넌트를 설계하여 컴포넌트를 구현하는 상황에 따라 차별적인 layout(eg, 시간만 표시되는 상황, 인덱스만 표시되는 상황, 둘다 표시되는 상황)이 나타낼 수 있도록 작업하였습니다.