[React/Typescript] 화면 전환 효과 / 페이드인 애니메이션 / Fade 컴포넌트

 

 

종설 개발 중에 화면 전환 효과가 있으면 좋을 것 같아 넣어본 fade 효과 컴포넌트입니다.

duration 변수로 fade in 시간 조절 가능하고,

전환 애니메이션 상태 속성은 아래 참고.

 

entering: 컴포넌트가 화면에 진입하는 애니메이션을 수행 중인 상태를 나타냅니다.
entered: 컴포넌트가 화면에 완전히 진입한 상태를 나타냅니다.
exiting: 컴포넌트가 화면에서 사라지는 애니메이션을 수행 중인 상태를 나타냅니다.
exited: 컴포넌트가 화면에서 완전히 사라진 상태를 나타냅니다.

 

혹시 나중에 써먹을 일 생길까봐 & 필요하신 분 있을까봐 공유!

 

아 참고로 react에서 transition 쓰려면 설치 먼저 해줘야한다.

 

Javascript : 

npm install react-transition-group

 

Typescript : 

npm i --save-dev @types/react-transition-group

 

Fade in/Fade out/부드러운 화면전환 코드

import React, { ReactNode } from "react";
import { Transition } from "react-transition-group";

interface IProps {
  children: React.ReactNode;
}

const duration = 200;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
};

const transitionStyles: { [key: string]: any } = {
  entering: { opacity: 1 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 },
  exited: { opacity: 0 },
};

const Fade = ({ children }: IProps) => {
  const [inProp, setInProp] = React.useState(false);

  React.useEffect(() => {
    setInProp(true);
    return () => setInProp(false);
  }, []);

  return (
    <Transition in={inProp} timeout={duration}>
      {(state) => (
        <div
          style={{
            ...defaultStyle,
            ...transitionStyles[state],
          }}
        >
          {children}
        </div>
      )}
    </Transition>
  );
};

export default Fade;

 

사용할 때는 아래와 같이 return 내부에 fade 효과를 주고싶은 요소들을 감싸면 됩니다.