React vol.13 (React Transition Group)

개요

React JS 를 공부하면서 기본을 정리해두고자 작성

 

React Transition 이란?

css의 animaition이나 transition으로 좀더 효과적이면 동적이고 부드러운 UI를 구현할 수 있지만, 이런 효과들중에 opacity: 0로 보이지 않게할 뿐 해당 element는 페이지내에 존재하는 경우가 있다. 그래서 React팀은 실제로 페이지 내에서 element를 삭제하고 다시 재생성할 때 transition과 animation효과를 쉽게 줄 수 있게하는 React Transition Group이라는 라이브러리를 만들었다.

 

Install

npm install react-transition-group

 

usage

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

class App extends Component {
  state = {
    modalIsOpen: false,
  };

  showModal = () => {
    this.setState({ modalIsOpen: true });
  };

  closeModal = () => {
    this.setState({ modalIsOpen: false });
  };

  render() {
    return (
      <Transition
        in={this.state.modalIsOpen}
        timeout={500}
        mountOnEnter
        unmountOnExit
      >
        {(state) => <Modal show={state} closed={this.closeModal} />}
      </Transition>
    );
  }
}

export default App;

Transition의 props

• in => boolean값을 넘김으로써 false => true로 될 때 children의 영역에 있는 함수의 status가 entering으로 되고 timeout만큼의 시간이 지나면 entered로 된다. 반대로 true => false가 될 때 exiting이 되고 timeout만큼의 시간이 지나면 exited가 된다.
• timeout => transition의 time과 같으며 애니메이션 효과를 주는 시간이다.
• mountOnEnter => in가 true가 될 때 해당 element를 추가
• unmountOnExit => in가 false가 될 때 해당 element를 제거

Modal.js

import React from "react";

import "./Modal.css";

const modal = (props) => {
  const cssClasses = [
    "Modal",
    props.show === "entering"
      ? "ModalOpen"
      : props.show === "exiting"
      ? "ModalClosed"
      : "",
  ];

  return (
    <div className={cssClasses.join(" ")}>
      <h1>A Modal</h1>
      <button className="Button" onClick={props.closed}>
        Dismiss
      </button>
    </div>
  );
};

export default modal;

Modal.css

.Modal {
  position: fixed;
  z-index: 200;
  border: 1px solid #eee;
  box-shadow: 0 2px 2px #ccc;
  background-color: white;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
  top: 30%;
  left: 25%;
  width: 50%;
}

.ModalOpen {
  animation: openModal 0.4s ease-in-out forwards;
}

.ModalClosed {
  animation: closeModal 0.4s ease-in-out forwards;
}

@keyframes openModal {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  50% {
    opacity: 1;
    transform: translateY(20%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes closeModal {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  50% {
    opacity: 0.8;
    transform: translateY(20%);
  }

  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

말고도 다른 Props는 밑의 공식문서를 참조

https://reactcommunity.org/react-transition-group/transition

React Transition Group