Tailwind를 사용하는 간단한 React Loader 구성 요소

안녕하세요 여러분,

Tailwind에서 작업한 지 오래되었고 최근에 React 프로젝트 중 하나에서 간단한 로더 구성 요소가 필요했습니다. 그러나 Tailwind는 유틸리티 우선 라이브러리이므로 미리 정의된 스피너 또는 로더가 없습니다. 그래서 저는 Tailwind와 함께 React를 사용하여 저만의 간단한 로더를 만들었고 이 튜토리얼에서는 그것을 만드는 방법도 설명할 것입니다!

우리는 이와 유사한 로더를 만들 것입니다.


시작하자 -

이 자습서에서는 완전한 Tailwind 구성으로 준비된 React 프로젝트 설정이 이미 있다고 가정합니다. 이제 React에서 Loader 구성 요소를 만들고 그 안에 세 개의 원을 추가해 보겠습니다.

로더 구성 요소는 다음과 같습니다.

const Loader = () => {
     let circleCommonClasses = 'h-2.5 w-2.5 bg-current rounded-full';

     return (
    <div className='flex'>
         <div className={`${circleCommonClasses} mr-1`}></div>
         <div className={`${circleCommonClasses} mr-1`}></div>
         <div className={`${circleCommonClasses}`}></div>
    </div>
     );
};

export default Loader;

위의 코드를 사용하여 생성된 구성 요소는 다음과 같습니다.


이제 코드를 이해해 봅시다.

세 개의 원이 동일하므로 변수circleCommonClasses를 만들고 해당 변수에 모든 순풍 클래스 목록을 할당했습니다. 이렇게 하면 나중에 스타일을 변경해야 하는 경우 한 곳에서 쉽게 변경할 수 있으므로 오류가 덜 발생합니다.

또한 배경에 bg-current 클래스를 추가했습니다. 이렇게 하면 올바른 색상을 제공할 생각 없이 어디서나 이 로더를 사용할 수 있습니다. 이러한 원을 표시된 첫 번째 이미지와 유사하게 만들려면 이러한 클래스를 수정하고 고유한 스타일을 적용할 수 있습니다.

외부 div에는 display: flex 속성이 있으며 세 개의 원이 모두 인라인인지 확인합니다.

이제 이 원에 애니메이션을 추가하고 로더를 완성해야 합니다. 기본적으로 Tailwind는 몇 가지 기본 애니메이션을 제공하며 그 중 하나를 사용합니다. 애니메이션 이름은 바운스이며 서클에 클래스animate-bounce를 추가하여 추가할 수 있습니다.

그러나 여기에 작은 문제가 있습니다. 세 개의 원이 모두 동일한 애니메이션 바운스를 갖는 경우 모두 함께 바운스되며 첫 번째 이미지에 표시된 것처럼 원이 차례로 렌더링되는 효과를 얻지 못합니다. 그 효과를 얻으려면 마지막 두 원에 애니메이션 지연을 추가해야 합니다.

그러나 불행히도 Tailwind v2.1animation-delay 속성이 Tailwind에 명시적으로 추가되지 않을 때까지. 따라서 이를 달성하기 위한 다른 방법을 찾아야 합니다.

이를 수행하는 가장 좋은 방법은 Tailwind.config.js 에서 애니메이션 클래스를 확장하는 것입니다. 애니메이션 지연은 애니메이션 속성에 속기 속성으로 추가할 수 있습니다. 그런 식으로 지연을 추가하고 tailwind 구성에서 사용자 지정 클래스를 만들 수 있습니다. 따라서 이를 추가한 후 tailwind.config.js 파일은 다음과 같이 표시됩니다.

//tailwind.config.js

module.exports = {
    purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false,
    theme: {
        colors: {
      //some colors
        },
        extend: {
            animation: {
                bounce200: 'bounce 1s infinite 200ms',
                bounce400: 'bounce 1s infinite 400ms',
            },
        },
    },
    plugins: [],
};

여기에서 애니메이션 개체를 자세히 살펴보십시오. 우리는 애니메이션 바운스와 각각 200ms와 400ms의 애니메이션 지연을 추가하여 두 개의 클래스 bound200과 bound400을 생성했습니다. 이제 이러한 클래스를 Loader 구성 요소의 원에 추가하면 Loader를 잘 사용할 수 있습니다.

마지막으로 로더는 다음과 같이 보일 것입니다.

const Loader = () => {
    let circleCommonClasses = 'h-2.5 w-2.5 bg-current   rounded-full';

    return (
        <div className='flex'>
            <div className={`${circleCommonClasses} mr-1 animate-bounce`}></div>
            <div
                className={`${circleCommonClasses} mr-1 animate-bounce200`}
            ></div>
            <div className={`${circleCommonClasses} animate-bounce400`}></div>
        </div>
    );
};

export default Loader;

이렇게 하면 React 및 Tailwind가 포함된 매우 기본적인 애니메이션 Loader가 준비됩니다! 하지만 Tailwind에는 여전히 애니메이션에 대한 몇 가지 제한 사항이 있지만 이를 창의적으로 사용하고 고유한 구성 요소를 만들 수 있습니다. 이 목적으로 직접 사용할 수 있는 일부 플러그인도 있습니다.

이 글부터 그랬습니다. 문서 및 최근에 만든 몇 가지 멋진 구성 요소에 대한 의견/피드백을 공유하세요! 내 기사가 마음에 들면 또는 buy me a coffee에서 나와 연결할 수도 있습니다.

계속 배우세요 🙌