React Semantic UI에서 Dropdown 및 Modal의 애니메이션 문제 해결하기

React Semantic UI에서 모달과 드롭다운 애니메이션

HTML 버전의 Semantic UI에서 React Semantic-UI로 전환할 때, 드롭다운 메뉴와 모달 팝업과 같은 애니메이션이 사라진 것을 알 수 있습니다. 이 블로그 글에서는 React Semantic-UI에서 이러한 컴포넌트에 애니메이션을 적용하는 방법을 알아보겠습니다.

문제: 애니메이션 사라짐

React Semantic-UI로 전환하면 드롭다운 메뉴와 모달 팝업과 같은 HTML 버전에 있는 애니메이션이 자동으로 추가되지 않는다는 것을 발견할 수 있습니다. 이는 특히 기본적으로 이러한 애니메이션이 포함되어있을 것으로 기대했던 경우에 약간 답답할 수 있습니다.

하나의 해결책은 React Transition Group 라이브러리의 <Transition> 컴포넌트를 사용하는 것입니다. <Modal> 컴포넌트를 <Transition>으로 감싸면 모달 팝업에 애니메이션을 적용할 수 있습니다.

import React from 'react';
import { Button, Modal, Transition } from 'semantic-ui-react';

const ModalWithAnimation = () => (
  <Transition animation='scale' duration={500}>
    <Modal
      trigger=<Button>모달 보기</Button>
      header='알림!'
      content='보고서 관련하여 벤자민에게 전화하세요.'
      actions={[
        '미루기',
        { key: '완료', content: '완료', positive: true },
      ]}
    />
  </Transition>
);

export default ModalWithAnimation;

대안적인 해결책

React Transition Group 라이브러리를 사용하여 모달에 애니메이션을 추가하는 것은 도움이 될 수 있지만, 더 탐구할 가치가 있는 다른 대안도 있습니다. 이 GitHub 토론에서 한 가지 해결책을 찾을 수 있습니다: https://github.com/Semantic-Org/Semantic-UI-React/issues/2923.

이 토론에서는 여러 가지 접근법이 언급되었으며, 사용자들은 React Semantic-UI에서 모달 및 드롭다운 컴포넌트에 애니메이션을 추가하는 방법에 대한 예제도 공유했습니다. 하나의 해결책은 <Modal>을 <TransitionablePortal> 컴포넌트로 감싸는 것입니다.

import React from 'react';
import { Button, Modal, TransitionablePortal } from 'semantic-ui-react';

const ModalWithAnimation = () => (
  <TransitionablePortal>
    <Modal
      trigger=<Button>모달 보기</Button>
      header='알림!'
      content='보고서 관련하여 벤자민에게 전화하세요.'
      actions={[
        '미루기',
        { key: '완료', content: '완료', positive: true },
      ]}
    />
  </TransitionablePortal>
);

export default ModalWithAnimation;

결론

이 블로그 글에서는 React Semantic-UI에서 드롭다운 메뉴와 모달 팝업 컴포넌트에 애니메이션을 추가하는 방법을 살펴보았습니다. React Transition Group 라이브러리 또는 <TransitionablePortal> 컴포넌트를 사용하여 Semantic UI의 HTML 버전에서 누락된 애니메이션을 복원할 수 있습니다.

제공된 코드 스니펫과 제안된 대안적인 해결책을 활용하여 사용자 경험을 향상시키고 React Semantic-UI 컴포넌트를 시각적으로 매력적으로 만들어보세요.

참고 자료 : 

reactjs