반응하는 햄버거 효과 [TW, TS]

안녕하세요 여러분 👋
오늘은 reactTailwind CSS의 도움을 받아 TypeScript에 간단한 햄버거 메뉴 효과를 만들어 보겠습니다.
먼저 다음이 필요합니다.
  • 작업 반응 환경
  • TypeScript Tailwind ready으로 환경 반응
  • 커피 또는 기타 원하는 음료 (내가 선택한 음료는 Kofola)

  • 인터페이스 설정



    우리는 TypeScript를 사용하고 있기 때문에 인터페이스 형태로 슈퍼파워를 사용할 것입니다. 이 인터페이스는 구성 요소의 props를 나타냅니다.

    // location: src/interfaces.ts
    export interface iHamburger {
      handleClick: () => void;
      open: boolean;
    }
    


    인터페이스에 두 가지 속성이 있습니다.
  • handleClick :콜백 함수, 사용자가 햄버거와 상호 작용할 때 실행되어야 합니다.
  • open : 햄버거의 현재 상태를 유지하는 부울

  • 자신의 속성 및 기능으로 이 인터페이스를 확장할 수 있습니다. 예를 들어 다크 모드에 대한 속성dark 또는 추가 스타일을 통해className

    기본 구성 요소



    요즘 유행이라 functional component 를 사용하겠습니다.

    // location: src/components/Hamburger.tsx
    import { iHamburger } from "../interfaces";
    
    const Hamburger: React.FC<iHamburger> = ({ handleClick, open }) => {
      return (
        <figure>
          <div />
          <div />
          <div />
        </figure>
      );
    };
    
    export { Hamburger };
    

    <figure/> 태그를 사용한 이유는 단순히 이 구성 요소가 다른 무엇보다 시각적 요소를 나타낸다고 생각하기 때문입니다.

    소품 사용




    ...
    const Hamburger: React.FC<iHamburger> = ({ handleClick, open }) => {
      return (
        <figure className="" onClick={handleClick}>
          <div className={`${open ? "" : ""}`} />
          <div className={`${open ? "" : ""}`} />
          <div className={`${open ? "" : ""}`} />
        </figure>
      );
    };
    ...
    


    나는 그것에 대해 말할 것이 많지 않다고 생각합니다. 우리는 구성 요소의 소품을 작동시키기만 하면 됩니다.

    스타일링




    const HamBurger: React.FC<iHamburger> = ({ handleClick, open, className }) => {
      return (
        <figure className="w-8 h-8 flex justify-around flex-col flex-wrap z-10 cursor-pointer" onClick={handleClick}>
          <div className={`bg-black block w-8 h-[0.35rem] rounded transition-all origin-[1px] ${open ? "" : ""}`} />
          <div className={`bg-black block w-8 h-[0.35rem] rounded transition-all origin-[1px] ${open ? "" : ""}`} />
          <div className={`bg-black block w-8 h-[0.35rem] rounded transition-all origin-[1px] ${open ? "" : ""}`} />
        </figure>
      );
    };
    


    만세! 이것으로 우리는 마침내 구성 요소를 볼 수 있습니다. (어딘가에 렌더링/사용한 경우)

    효과 자체




    ...
    <div className={`...${open ? "rotate-45" : "rotate-0"}`} />
    <div className={`...${open ? "translate-x-full bg-transparent" : "translate-x-0"}`} />
    <div className={`...${open ? "rotate-[-45deg]" : "rotate-0"}`} />
    ...
    


    삼항 연산자에서 이러한 스타일을 사용하면 메뉴가 열리면 X가 표시되고 닫히면 햄버거가 표시됩니다. 메뉴의 버거/중간 부분이 오른쪽으로 이동하고 활성화되면 사라집니다.

    최종 코드




    import { iHamburger } from "../interfaces";
    
    const Hamburger: React.FC<iHamburger> = ({ handleClick, open, className }) => {
      return (
        <figure
          className={`w-8 h-8 flex justify-around flex-col flex-wrap z-10 cursor-pointer ${className}`}
          onClick={handleClick}
        >
          <div
            className={`bg-black block w-8 h-[0.35rem] rounded transition-all origin-[1px] ${
              open ? "rotate-45" : "rotate-0"
            }`}
          />
          <div
            className={`bg-black block w-8 h-[0.35rem] rounded transition-all origin-[1px] ${
              open ? "translate-x-full bg-transparent" : "translate-x-0"
            }`}
          />
          <div
            className={`bg-black block w-8 h-[0.35rem] rounded transition-all origin-[1px] ${
              open ? "rotate-[-45deg]" : "rotate-0"
            }`}
          />
        </figure>
      );
    };
    
    export { Hamburger };
    


    아래에서 결과를 볼 수 있습니다.


    이 컴포넌트를 사용하는 것은 매우 간단합니다. 콜백 함수만 있으면 됩니다. 콜백 함수는 사용자가 햄버거와 햄버거의 현재 상태가 있는 소품을 클릭하면 실행되어야 합니다.

    사이드바 메뉴와 함께 이 설정을 사용하는 것을 좋아합니다. 그래서 사이드바의 현재 상태useState가 있고 상태를 변경하는 기능이 있습니다. 나는 이 두 가지를 <Hamburger/> 구성 요소의 소품으로 사용합니다.

    내가 당신을 충분히 돕고/즐거웠기를 바라며, 이 게시물의 품질에 대해 양해해 주십시오. 여기 dev.to에 있는 첫 번째 게시물입니다.

    우주 카우보이 🚀 만나요

    좋은 웹페이지 즐겨찾기