React와 Tailwind CSS로 간단한 애니메이션 구현하기

이번 글에서는 React와 Tailwind CSS를 사용해서 간단한 애니메이션과 상태 관리를 구현하는 방법을 알아보겠습니다. 

 

본격적인 설명에 앞서 다음 두 가지 용어를 정리하고 넘어가겠습니다. 

• useState : 컴포넌트 내에서 동적인 값을 저장하고 업데이트할 수 있게 해주는 React의 훅(Hook) 입니다.
• Tailwind CSS: Tailwind CSS는 클래스 이름만으로 다양한 스타일을 쉽게 적용할 수 있게 도와주는 도구예요. 이번 글에서는 상태에 따라 다른 CSS 애니메이션과 스타일을 적용합니다.

 

구현 예제 코드

아래는 사용자가 텍스트를 입력하고 엔터 키를 누르면, 입력란이 화면 위쪽으로 이동하면서 더 이상 수정할 수 없게 되는 예제 코드입니다.

import { useState } from "react";

export default function SearchBar() {
  // 상태를 관리하는 useState 훅을 사용합니다.
  const [isSubmitted, setIsSubmitted] = useState(false);

  // 엔터 키를 감지하는 함수입니다.
  const handleKeyPress = (event) => {
    if (event.key === "Enter") {
      setIsSubmitted(true); // 엔터 키가 눌리면 상태를 true로 변경합니다.
    }
  };

  return (
    <div className="w-screen h-screen flex items-center justify-center">
      <div
        className={`max-w-[320px] w-full text-center absolute transform ${
          isSubmitted ? "top-32" : "top-1/2 translate-y-[-50%]"
        } transition-all duration-1000 ease-in-out`}
      >
        <input
          type="text"
          className={`w-full text-3xl pb-2 text-gray-900 border-b-2 border-gray-900 text-center focus:outline-none ${
            isSubmitted ? "bg-transparent text-gray-900 cursor-default" : ""
          }`}
          placeholder="찾을 단어를 입력해주세요"
          onKeyPress={handleKeyPress}
          disabled={isSubmitted}  // 상태가 true일 때 입력란을 비활성화합니다.
        />
      </div>
    </div>
  );
}

 

 

코드 설명

1. 상태 관리 (useState): useState 훅을 사용해 isSubmitted 상태를 관리합니다. 처음에는 false로 설정되고, 엔터 키를 누르면 true로 변경됩니다.
2. 엔터 키 감지 (handleKeyPress): 사용자가 입력란에 글을 입력하고 엔터 키를 누르면 isSubmitted 상태가 true로 변경됩니다.
3. 조건부 클래스 적용: 상태에 따라 CSS 클래스를 다르게 적용합니다. 입력란이 위로 이동하는 애니메이션과 함께 input 입력란을 비활성화합니다. 예제 코드에서는 삼항 연산자를 이용하여 표현했어요.
4. 애니메이션과 스타일 적용: Tailwind CSS의 transition-all과 duration-1000 클래스를 사용해 애니메이션을 부드럽게 만들고, 입력란이 비활성화될 때 배경색이 바뀌지 않도록 bg-transparent 를 추가로 설정했습니다. 

 

 

마무리

예제를 통해 React의 상태 관리와 Tailwind CSS를 사용한 애니메이션 적용 방법을 간단하게 구현해보았습니다. 특별한 기술이 없더라도 이렇듯 웹 페이지에 다양한 인터랙티브 요소를 쉽게 추가할 수 있습니다. 직접 코드를 작성해보면서 연습해보세요 :)