Modal 개발하기

박종대·2022년 9월 30일

Convi

목록 보기

2/9

Convi

요즘 mui나 tui, ant design 등 많은 ui 라이브러리들이 존재합니다. 회사 업무 중에도 mui를 사용해봤고 청첩장 프로젝트를 진행할 때에도 ant design을 사용해 봤습니다.
이들은 물론 편리하고 기능도 다양하지만 프로젝트의 규모가 커질수록 사용중인 ui 라이브러리의 성능 문제가 대두 됐습니다. 그래서 회사 측에서도 현재 자체 ui 컴포넌트를 개발하여 교체하는 작업을 진행 중입니다.

ui 라이브러리는 편리하지만 완전히 우리에게 fit 하지 않습니다. 세계에 존재하는 수많은 개발자들의 의견을 반영해서 개발되어 있기 때문에 나에게는 필요없는 기능도 존재할 수 있습니다. 그래서 최대한 많은 개발자들에게 fit한 ui 컴포넌트를 만들어보자 라는 생각을 하게 되었습니다.

예를 들어, Modal 창 같은 경우 보통 맨 위에 title bar가 존재합니다. 하지만 Mui Modal 같은 경우 title bar는 modal contents에 직접 작성해야 합니다. 물론 wrapping 컴포넌트 하나 만들면 그만이지만 Modal에 title props만 넘겨주면 title bar를 생성했으면 좋겠다는 생각을 했었습니다.

사용하기 편리한(Convinience) ui 컴포넌트를 목표로 개발을 시작합니다.

Modal 컴포넌트 입니다. Modal 창은 현재 페이지는 유지하면서 추가적인 정보를 표시하기 위해 새로운 창을 띄우고 싶을 때 사용합니다.

mui에선 이러한 Modal을 제시하고 있습니다. Modal은 사실 별다른 기능이 필요없기 때문에 저도 이와 비슷하게 개발할 생각입니다.

제가 생각한 기능셋을 먼저 살펴보겠습니다.

title bar

backdrop 클릭 시 Modal 창이 닫히지 않게 할 수 있는 기능

해당 기능셋을 반영한 Modal의 Props 타입은 다음과 같습니다.

interface ConviModalProps {
	open: boolean; // modal open state
	onClose: () => void; // close modal
	preventBackdropClick?: boolean; // prevent click event for backdrop
	children?: ReactNode; // children
	title?: ReactNode; // modal title
}

open : Modal의 열고 닫음의 상태

onClose: Modal을 닫을 이벤트 핸들러

preventBackdropClick: backdrop 클릭 이벤트 활성화 여부

title: title bar 활성화 여부 및 title text

구현에 큰 어려운 부분은 없고 페이지를 잘 나누기만 하면 됩니다.

css의 visibility 속성을 사용할 것이냐 display 속성을 사용할 것이냐의 문제인 것 같습니다.

display: ${props => (props.open ? 'inline' : 'none')};
visibility: ${props => (props.open ? 'visible' : 'hidden')};
* 어떤 방식으로 해야 할까?

visibility는 hidden 상태여도 공간을 차지하고 있고 display는 none 상태라면 공간을 차지하지 않습니다. 즉, visibility가 hidden이어도 렌더링 트리에는 존재하고 display가 none이라면 렌더링 트리에 존재하지 않습니다.

modal을 껐는데 렌더링 트리에 존재하는 것이 불편하다면 display, 그게 아니면 visibility 겠지만 저는 visibility를 선택합니다.

Modal창은 현재 페이지의 추가적인 정보를 나타내기 위해 사용합니다. 따라서 페이지의 state 정보를 이용할 때가 많습니다. 그런데 display를 사용하여 렌더링 트리에서 없앴다가 다시 생성할 때 렌더링 과정에서 버그가 발생하는 경우를 회사에서 경험했습니다. Modal 창이 페이지 내에 많이 존재하는 경우도 드물기에 저는 Visibility hidden 방식을 선택했습니다.