세상에나 도대체 div 가 몇개야?..

컨테이너의 올바른 사용

우리가 페이지나 컴포넌트를 만들때 수많은 Div 태그들을 사용한다

주로 레이아웃을 잡거나 할때 컨테이너들을 아주 많이 사용하는데,
막 잡다보면 쓰잘때기 없이 div 가 많아지기 마련이다
그럼 css 구조가 아주 더러워져서, 뭐만하나 잘못 만지면 이상하게 레아아웃이 터져버리는 일이 발생하기도 하고,
꼴뵈기가 싫다

빠르게 예제를 좀 보자

예쁜 구조의 이쁘니 모달

 <div className={modalOverlay} onClick={handleOuterClick}>
    <div className={modalContent(variants)}>
        <div className={modalHeader}>
            <Text size={'xxl'} weight={'bold'} color={'blue.400'}>
                {title}
            </Text>

            {additionalButton && <div className={additionalButtonContainer}>{additionalButton}</div>}
        </div>

        <div className={modalBody}>{content}</div>

        <div className={modalFooter}>
            {confirmButton}

            {rejectButton}

            <ModalButton label={'Close'} onClick={handleOnClose} />
        </div>
    </div>
</div>

더러운 구조의 지지 모달

<div className={modalOverlay}>
    <div className={modalContent({ size })} onClick={(e) => e.stopPropagation()}>
        <Flex align={'center'} justify={'center'} direction={'column'}>
            <Flex align={'center'} justify={'center'} style={{ padding: '16px', width: '100%' }}>
                <Text size={'lg'} weight={'bold'} color={'blue.300'}>
                    {title}
                </Text>
                <button className={modalCloseButton} onClick={close} aria-label={'Close'}>
                    <Icon_close />
                </button>
            </Flex>
        </Flex>

        <div className={modalBody}>{content}</div>

        <Flex direction={'row'} justify={'center'} gap={'xs'} style={{ padding: '16px' }}>
            {useCloseButton && (
                <Button label={'Close'} onClick={close} type={'button'} style={{ padding: '10px 24px' }} />
            )}
            {leftButton}
            <Flex gap={'sm'}>{rightButton}</Flex>
        </Flex>
    </div>
</div>

물론 아래처럼 나온 변명을 하자면,
이게 레아아웃을 짜다보면 여러 컴포넌트들을 위치 시키기 위해서 구조가 많아지게 되고 (버튼은 끝으로 밀고 제목은 중앙으로 닫기 버튼은 그 중간.. 등등)
그러다보니 냅다 Flex 나 기타 컨테이너를 잔뜩 늘려서 결국 뚱뚱해진 레이아웃이 만들어진다.

사실 CSS 실력 부족이긴 한거같다..

css 공부를 하면서 리팩토링 할때 저런 컨테이너도 최소한으로 줄이려는 노력을 해야겠다.