리액트 애니메이션 드롭다운 메뉴 만들기

리액트는 많은 개발자가 웹 애플리케이션을 만들 때 선택하는 인기 있는 자바스크립트 라이브러리 중 하나입니다. 이는 리액트가 다른 프론트엔드 프레임워크와 비교하여 성능, 재사용성, 유지보수성 등 여러 가지 이점이 있기 때문입니다.

리액트는 자바스크립트 라이브러리로, 사용자 인터페이스를 만들기 위한 도구입니다. 리액트를 사용하면 UI를 빠르게 개발할 수 있고, 변경 사항을 쉽게 반영할 수 있습니다. 이 글에서 설명하는 애니메이션 드롭다운 메뉴도 간단하고 빠르게 만들 수 있습니다.

리액트는 컴포넌트라는 작은 단위로 UI를 구성합니다. 각 컴포넌트는 독립적으로 작동하며 재사용이 가능합니다. 이를 통해 코드의 가독성과 유지보수성이 향상됩니다. 또한, JSX 문법을 사용하여 HTML과 자바스크립트를 함께 작성할 수 있어 코드의 가독성이 높아집니다. 그래서 애니메이션 드롭다운 메뉴를 하나 만들어 놓으면 여러 곳에서 재사용할 수 있습니다.

리액트에서 애니메이션이 들어간 드롭다운 메뉴를 만드는 방법은 다음과 같습니다.

1. react-transition-group 라이브러리 설치

먼저, react-transition-group 라이브러리를 설치합니다. 이 라이브러리는 애니메이션을 쉽게 만들 수 있도록 도와줍니다.

npm install react-transition-group

2. 드롭다운 메뉴 상태 관리하기

드롭다운 메뉴를 만들기 위해서는 메뉴가 열려있는지, 닫혀있는지 상태를 관리해주어야 합니다. 이를 위해서 useState 훅을 사용하여 상태를 관리합니다.

import React, { useState } from 'react';

function DropdownMenu() {
  const [isOpen, setIsOpen] = useState(false);
  
  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };
  
  return (
    <div>
      <button onClick={toggleDropdown}>Dropdown</button>
      {isOpen && (
        <ul>
          <li>Menu Item 1</li>
          <li>Menu Item 2</li>
          <li>Menu Item 3</li>
        </ul>
      )}
    </div>
  );
}

export default DropdownMenu;

위의 코드에서는 isOpen 상태 변수를 사용하여 메뉴가 열려있는지, 닫혀있는지를 관리합니다. toggleDropdown 함수는 버튼을 클릭했을 때 isOpen 상태 변수를 반대값으로 변경해주는 역할을 합니다.

3. 애니메이션 추가하기

애니메이션을 추가하기 위해서는 react-transition-group 라이브러리의 CSSTransition 컴포넌트를 사용합니다. 이 컴포넌트는 특정 상태가 될 때 CSS 애니메이션을 실행시키는 역할을 합니다.

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './DropdownMenu.css';

function DropdownMenu() {
  const [isOpen, setIsOpen] = useState(false);
  
  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };
  
  return (
    <div>
      <button onClick={toggleDropdown}>Dropdown</button>
      <CSSTransition
        in={isOpen}
        timeout={300}
        classNames="menu"
        unmountOnExit
      >
        <ul>
          <li>Menu Item 1</li>
          <li>Menu Item 2</li>
          <li>Menu Item 3</li>
        </ul>
      </CSSTransition>
    </div>
  );
}

export default DropdownMenu;

위의 코드에서는 CSSTransition 컴포넌트를 사용하여 애니메이션을 추가하였습니다. in 속성은 애니메이션을 실행시키기 위한 상태를 나타내며 timeout 속성은 애니메이션 지속 시간을 나타냅니다. classNames 속성은 애니메이션에 사용할 CSS 클래스 이름을 나타내며, unmountOnExit 속성은 애니메이션이 종료되면 컴포넌트를 제거할지 여부를 나타냅니다.

4. 애니메이션 CSS 추가하기

이제, 애니메이션에 사용할 CSS를 추가해줍니다. DropdownMenu 컴포넌트와 동일한 폴더에 DropdownMenu.css 파일을 생성합니다.

.menu-enter {
  opacity: 0;
  transform: translateY(-10px);
}

.menu-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms;
}

.menu-exit {
  opacity: 1;
  transform: translateY(0);
}

.menu-exit-active {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 300ms, transform 300ms;
}

위의 코드에서는 .menu-enter 클래스와 .menu-enter-active 클래스를 사용하여 메뉴가 열릴 때 애니메이션을 추가합니다. .menu-exit 클래스와 .menu-exit-active 클래스를 사용하여 메뉴가 닫힐 때 애니메이션을 추가합니다. translateY 속성을 사용하여 메뉴를 위아래로 이동시키며, opacity 속성을 사용하여 투명도를 조절합니다.

5. 전체 코드

최종적으로, DropdownMenu 컴포넌트와 DropdownMenu.css 파일을 합친 전체 코드는 다음과 같습니다.

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './DropdownMenu.css';

function DropdownMenu() {
  const [isOpen, setIsOpen] = useState(false);
  
  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };
  
  return (
    <div>
      <button onClick={toggleDropdown}>Dropdown</button>
      <CSSTransition
        in={isOpen}
        timeout={300}
        classNames="menu"
        unmountOnExit
      >
        <ul>
          <li>Menu Item 1</li>
          <li>Menu Item 2</li>
          <li>Menu Item 3</li>
        </ul>
      </CSSTransition>
    </div>
  );
}

export default DropdownMenu;

.menu-enter {
  opacity: 0;
  transform: translateY(-10px);
}

.menu-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms;
}

.menu-exit {
  opacity: 1;
  transform: translateY(0);
}

.menu-exit-active {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 300ms, transform 300ms;
}

위의 코드를 실행해보면 버튼을 클릭하면 메뉴가 위아래로 애니메이션되며 나타나고 사라지는 것을 볼 수 있습니다. 이렇게 react-transition-group 라이브러리와 CSS를 사용하여 애니메이션이 들어간 드롭다운 메뉴를 만들 수 있습니다.

6. 추가적인 애니메이션 설정

위의 예시 코드에서는 메뉴가 위아래로 이동하는 애니메이션을 추가하였습니다. 다만, 이 외에도 다양한 애니메이션 효과를 추가할 수 있습니다.

예를 들어, 메뉴가 나타나는 방향을 변경할 수도 있습니다. 이를 위해서는 CSS에서 transform-origin 속성을 사용합니다.

.menu-enter {
  opacity: 0;
  transform: scale(0.9) translateY(-10px);
  transform-origin: top center;
}

.menu-enter-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 300ms, transform 300ms;
}

.menu-exit {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.menu-exit-active {
  opacity: 0;
  transform: scale(0.9) translateY(-10px);
  transition: opacity 300ms, transform 300ms;
}

위의 코드에서는 transform-origin 속성을 사용하여 메뉴가 나타날 때, 위쪽 중앙에서부터 출발하도록 설정하였습니다. scale 속성을 사용하여 메뉴가 나타날 때 크기가 작아졌다가 다시 원래 크기로 되돌아오도록 설정하였습니다.

이처럼, 다양한 CSS 속성을 사용하여 애니메이션을 추가할 수 있으며, react-transition-group 라이브러리를 사용하면 보다 쉽고 간편하게 애니메이션을 적용할 수 있습니다.