[ React / UI ] 합성 컴포넌트(Compound-Component)에 대해 알아보자.

상단 내용 작성 예정

 

 

( 2025-01-31 ~ )

 

2025. 02. 02 추가

∙ useControllableState() 공부

∙ ReactNode, ReactChild, ReactElement 공부 후, 재작성 될 예정 (아마 코드 또한 변경될 예정)

 

 

 

합성 컴포넌트의는 다음과 같다

 

1. Header, Body, Footer를 모두 호출한 경우

2. Body와 Footer만 호출한 경우

3. Body만 호출하고 Body에 스타일링을 덮어씌운 경우

사용자가 필요한 컴포넌트만을 호출함에 따라 다양한 모양의 컴포넌트를 만들 수 있다.

또한 각 컴포넌트에 className(tailwindCSS), style을 props로 넘겨주어 디자인을 수정할 수 있다.

 

📄 App.tsx (필요한 경우 펼쳐서 보기)

import { useState } from "react";
import { BottomSheet, BottomSheetBody, BottomSheetContent, BottomSheetFooter, BottomSheetHeader } from "./BottomSheet";

export default function App() {
  const [open, setOpen] = useState(false);

  const openBottomSheet = () => {
    setOpen(true);
  }

  const closeBottomSheet = () => {
    setOpen(false);
  }

  return (
    <div style={{position:'relative', width: "100vw", height: "100vh", display: "flex", flexDirection:'column', justifyContent: "center", alignItems: "center", backgroundColor:"#1e1f21", color:'white' }}>
      <button onClick={openBottomSheet}>Open</button>
      <BottomSheet open={open}>
        <BottomSheetContent>
          <BottomSheetHeader>
            <div style={{width:'50px', height:'50px', borderRadius:'50%', display:'flex', justifyContent:'center', alignItems:'center', backgroundColor:'#6ac4bc'}}>
              <span style={{color:'white', transform:'rotate(55deg) scaleY(-1)', fontWeight:"normal", fontSize:'20px'}}>7</span>
            </div>
          </BottomSheetHeader>
          <BottomSheetBody>
            <div style={{textAlign:'center'}}>
            <p style={{color:'white'}}>Body Content </p>
            <p style={{color:'white'}}>ma.caron_g</p>
            <p style={{color:'white'}}>Tistory</p>
            </div>
          </BottomSheetBody>
          <BottomSheetFooter>
            <button onClick={closeBottomSheet}
             style={{width:'80%',backgroundColor:'#6ac4bc', color:'white', borderRadius:'10px', border:'none', padding:'10px 20px'}}>확인</button>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheet>
    </div>
  );
}

 

다음 코드는 블로그를 작성하기 위해 빠르게 작성한 코드이므로, 부족한 코드일 수 있습니다.

다만 구조적으로는 합성 컴포넌트이니 참고하면 됩니다.

 

 

📄 BottomSheet.tsx

하단에서 사용자에게 정보를 알리는 BottomSheet를 구현하였을 때, 다음과 같다.

 

✅ 바텀시트

✅ 시트 뒤에 화면을 가릴 Overlay

✅ 내용을 담을 Container

✅ 내용의 Header, Body, Footer

✅ Container와 Overlay를 한 번에 호출할 내용을 담을 Content

(시트가 마운트되면 뒷배경(Overlay)을 깔기 위해 Content에 합쳤으나, 불필요한 경우 개발 방향에 따라 분리해도 좋다.)

import React, { forwardRef } from 'react';
import { createPortal } from 'react-dom';

type BottomSheetProps = {
  open?: boolean;
} & React.ComponentPropsWithoutRef<"div">;

const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
  ({ children, className, open = false, ...props }, ref) => {
    if (open)
      return (
        <div ref={ref} className={className} {...props}>
          {children}
        </div>
      );
  }
);
BottomSheet.displayName = "BottomSheet";




const BottomSheetPortal = forwardRef<
  HTMLDivElement,
  {
    children: React.ReactNode;
    container?: Element | DocumentFragment | null;
  }
>(({ children, container }, ref) => {
  return createPortal(
    <div ref={ref}>{children}</div>,
    container ? container : document.body
  );
});
BottomSheetPortal.displayName = "BottomSheetPortal";




const BottomSheetOverlay = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div">>(
  ({ children, className, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={className}
        style={{
          width: "100%",
          height: '100%',
          position: 'fixed',
          top: '0px',
          left: '0px',
          display: "flex",
          flexDirection: 'column',
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: "#000000cc"
        }}
        {...props}
      >
        {children}
      </div>
    );
  }
);
BottomSheetOverlay.displayName = "BottomSheetOverlay";




type BottomSheetContentProps = {
  container?: Element | DocumentFragment | null;
} & React.ComponentPropsWithoutRef<"div">;

const BottomSheetContent = forwardRef<HTMLDivElement, BottomSheetContentProps>(
  ({ children, container }, ref) => (
    <BottomSheetPortal ref={ref} container={container}>
      <BottomSheetOverlay>
        <BottomSheetContainer>{children}</BottomSheetContainer>
      </BottomSheetOverlay>
    </BottomSheetPortal>
  )
);
BottomSheetContent.displayName = "BottomSheetContent";




const BottomSheetContainer = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div">>(
  ({ children, className, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={className}
        style={{
          position: 'fixed',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          bottom: '0px',
          width: '100%',
          height: "40%",
          background: '#383838',
          borderRadius: '2rem 2rem 0px 0px',
        }}
        {...props}
      >
        {children}
      </div>
    );
  }
);
BottomSheetContainer.displayName = "BottomSheetContainer";




const BottomSheetHeader = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div">>(
  ({ children, className, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={className}
        style={{
          position: 'relative',
          top:'30px',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          width: '100%',
          height:'fit-content',
          textAlign: 'center',
        }}
        {...props}
      >
        {children}
      </div>
    );
  }
);
BottomSheetHeader.displayName = "BottomSheetHeader";




const BottomSheetBody = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div">>(
  ({ children, className, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={className}
        style={{
          position: 'relative',
          top: '30px',     
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          width: '100%',
        }}
        {...props}
      >
        {children}
      </div>
    );
  }
);
BottomSheetBody.displayName = "BottomSheetBody";




const BottomSheetFooter = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div">>(
  ({ children, className, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={className}
        style={{
          position: 'absolute',
          bottom: '10px',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          width: '100%'
        }}
        {...props}
      >
        {children}
      </div>
    );
  }
);
BottomSheetFooter.displayName = "BottomSheetFooter";



export {
  BottomSheet,
  BottomSheetContent,
  BottomSheetHeader,
  BottomSheetBody,
  BottomSheetFooter
};

 

다음과 같이 짰을 때, 개발자는 컴포넌트 사용시, 필요한 내용만 호출하여 사용할 수 있다.