1. React Spring

이번 협업을 진행하면서 사수님이 추천해주셔서 React Spring 사용해보고 굉장히 편리하고 다루기 쉬워서 글로 간단하게 정리 해놓고자 한다.

1.1 React Spring 이란?

• 애니메이션을 간단하게 활용 할수 있는 라이브러 이다.
• 크로스 플랫폼이다.
• 브라우저 지원
• react Spring 공식 홈페이지

2. Modal 창 만들기

• CRA로 리액트 환경을 조성해준다.
• 라이브러리를 설치 해준다.

$ npm install --save react-spring 

• 모달창 활성 여부를 체크하는 값과 핸들러와 모달 컴포넌트를 만들어주자.

App.js

import React, { Component } from 'react';
import Modal1 from './Modal1';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { openModal: false };
  }
  handleOpenModal = () => {
    this.setState({ openModal: true });
  };
  handleCloseModal = () => {
    this.setState({ openModal: false });
  };
  render() {
    return (
    	<Modal1>
      	  <div>모달내용</div>
      	  <button onClick={this.handleCloseModal}>닫기</button>
        </Modal1>
    );
  }
}

export default App;

• Modal 컴포넌트도 간단하게 만들어주자

Modal1.js

import React, { Component } from 'react';
import './Modal1.css';

class Modal1 extends Component {
  render() {
    const { openModal } = this.props;

    return (
      <>
        {openModal && (
          <div className='over_lay'>
            <div className='modal_container'>{this.props.children}</div>
          </div>
        )}
      </>
    );
  }
}

export default Modal1;

Modal1.css

.over_lay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(45, 45, 45, 0.6);
  backdrop-filter: blur(30px);
  z-index: 9;
}
.modal_container {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 320px;
  width: 812px;
  left: 500px;
  height: 302px;
  border-radius: 20px;
  background-color: rgba(216, 216, 216, 0.7);
  padding-top: 40px;
  padding-bottom: 70px;
}

• 백그라운드 컴포넌트도 하나 만들어주자. (블러처리가 잘먹는지 보기위해)

Background.js

import React from 'react';

import './Background.css';

export default class Background extends React.PureComponent {
  render() {
    return (
      <div className='main' onClick={this.toggle}>
        <div
          style={{
            ...this.props.parentStyle
          }}
        ></div>
      </div>
    );
  }
}

• parentStyle 는 아래에서 이해할수 있다!

Background.css

.main > div {
  cursor: pointer;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: 800;
  font-size: 10em;
  background-image: url(https://images.unsplash.com/photo-1532386236358-a33d8a9434e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  background-size: cover;
}

• 마지막으로 App.js 로 가서 Spring 를 사용하자

import React, { Component } from 'react';
import './App.css';
import { Spring } from 'react-spring/renderprops';
import Modal1 from './Modal1';
import Background from './Background';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { openModal: false };
  }
  handleOpenModal = () => {
    this.setState({ openModal: true });
  };
  handleCloseModal = () => {
    this.setState({ openModal: false });
  };
  render() {
    const { openModal } = this.state;
    return (
      <>
        <button onClick={this.handleOpenModal}>open</button>
        <Modal1 openModal={openModal} handleCloseModal={this.handleCloseModal}>
          <div className='membership_header'>
            <div>모달내용</div>
            <button onClick={this.handleCloseModal}>닫기</button>
          </div>
        </Modal1>
        {openModal ? (
          <Spring
            from={{ transform: 'scale(1.0)' }}
            to={{ transform: 'scale(0.8)' }}
          >
            {props => <Background parentStyle={props} />}
          </Spring>
        ) : (
          <Spring
            from={{ transform: 'scale(0.8)' }}
            to={{ transform: 'scale(1.0)' }}
          >
            {props => <Background parentStyle={props} />}
          </Spring>
        )}
      </>
    );
  }
}

export default App;

• React Spring는 여러 애니메이션을 사용할수 있다. Spring는 2단계로 나눌수 있다.
• 등장 할때와 사라질때 애니메이션 효과를 줄수 있다.
• 모달이 true 일때 백그라운드가 블러 처리 되면서 사이즈가 작아진다.
• 해당 스타일을 Spring 컴포넌트 안에서 함수의 파라미터로 담겨 오며 그 스타일을 Background 에 props로 넘겨줘서 사용 했다.