1. Libraries

Notion의 Libraries & API 통합 페이지 바로가기

---

1-1. Rodal : The React Modal with Animation

0. References

Rodal: github
Rodal: A React Modal of Animations

1. Introduction

A React Modal with animations.
React + Modal의 합성어로, 9가지 종류의 애니메이션 효과를 가진 Modal을 react로 손 쉽게 띄우고, 제어할 수 있는 라이브러리이다. 코드를 뜯어보면 각 애니메이션 별로 CSS properties 및 Keyframe Animation이 Enter/Leave의 한 쌍으로 이루어져 구현이 되어있으며, 이 CSS Stylesheet는 사용자가 입맛에 맞게 제한 없는 수정이 가능하므로 그 자유도 및 활용도가 매우 높다. 또한 설치 및 사용도 굉장히 쉬운 편이라, 각 기능 별 상세한 Documentation이 존재하지 않았는데도 React를 학습한 지 고작 3일된 나도 Zeplin으로 넘겨 받은 디자인 그대로 Modal을 수정하고, 제어할 수 있었다.

2. Installation & Type Commands

npm i rodal --save

설치는 매우 간단하다. npm을 사용하여 설치하는 경우 command 창에 위의 코드를 입력하면 바로 설치되며, 시간도 오래 걸리지 않는다. 참고로 yarn을 통한 설치 역시 지원한다.

3. Syntax & Documentations

• Props
  

• Animation Types

  • zoom
  • fade
  • flip
  • door
  • rotate
  • slideUp
  • slideDown
  • slideLeft
  • slideRight

Example :

// 'react'경로에서 React를 import한다.
import React from 'react';
// 'rodal'경로에서 Rodal을 import
import Rodal from 'rodal';
// include styles
import 'rodal/lib/rodal.css';
// React.Component를 상속한 class App을 선언한다.
class App extends React.Component {
	// props를 인자로 받는 생성자를 기본 선언한다.
  constructor(props) {
		// this를 사용하기 위해서 기본적으로 super(props)를 선언한다.
    super(props);
		// state로 visible을 선언하고, 기본 값을 false로 초기화한다.
    this.state = { visible: false };
  }
	// show 메소드를 선언하고, show를 호출하면 state visible을 true로 setState한다.
  show() {
    this.setState({ visible: true });
  }
	// hide 메소드를 선언하고, hide를 호출하면 state visible을 false로 setState한다.
  hide() {
    this.setState({ visible: false });
  }
	// 리렌더링을 위한 render 함수를 호출한다.
  render() {
		// 반환할 컴포넌트의 내용물은 다음과 같다 :
    return (
			// outer-div를 선언한다. (복수개의 개체를 안에 내포하고 있으므로 wrapping한다.)
			// onClick 이벤트를 통해 show 메소드를 바인딩하는 버튼을 선언한다.
			// 즉, 이 버튼을 통해서 Rodal을 컨트롤 하게 된다. 
			// state.visible의 state에 따라 visible 설정을 진행하며,
			// hide 메소드의 this를 받아와서 이 값을 기준으로 Rodal의 열고 닫음을 결정한다.
      <div>     
				<button onClick={this.show.bind(this)}>show</button>
        <Rodal visible={this.state.visible} onClose={this.hide.bind(this)}>
          <div>Content</div>
        </Rodal>
      </div>
    );
  }
}

위의 내용은 공식 Documentation에서 제공하는 예시 코드이다. 화면 구성을 위한 라이브러리라면 Bootstrap을 한 달 가량 만져본 것이 전부였던 경험 상, 이 내용이 Documentation의 유일한 예제인 것을 깨닫고 다소 걱정했지만 그럴 필요가 없었다. 예시 코드가 짧은 것은 그만큼 사용하기 매우 쉽다는 이야기다. 문답무용이다. 아래의 Usages & Examples 항목을 보고 나면 이해가 될 것이다:

4. Examples & Usages

사용 방법은 아주 쉽다:

1. Constructor 내부에 Rodal의 ENTER/LEAVE를 제어할 visible 이라는 이름의 state를 선언해 준다.

2. Rodal의 ENTER/LEAVE를 제어할 메소드를 각각 선언하고 setState 구문을 설정해 준다. 참고로 visible은 boolean 타입으로, visible: true 일 때, Rodal은 화면에 노출될 것이며 visible: false 일 때 Rodal은 화면에 노출된 상태에서 사라지게 된다. 따라서, 이들 메소드를 호출해 주면 boolean 타입으로 Constructor 내부에 선언한 state - visible의 상태를 변경할 수 있게 되는 것이다.

3. <Rodal>을 선언해주고, 내부의 구성 요소들을 필요에 따라 배치한다. state로 선언한 visible을 Rodal의 property인 visible에 대입하는데, 이 때 선언구는 <Rodal visible={ this.state.visible }>의 형식으로 작성한다. 이는 state의 visible이라는 값의 현재 상태를 Rodal 객체의 prop:visible에 대입한다는 의미이다.

4. 이번엔 leave 설정을 위해서 onClose={ this.hide.bind(this) }를 작성해 준다. 여기서 onClose prop은 Rodal 창을 닫기 위해 핸들링하기 위함이고, 위에서 선언한 hide 메소드의 this를 이 onClose={} prop에 값으로써 대입한다는 의미이다.

5. <Rodal> 태그의 내부에 추가적인 props를 입맛에 맞게 선언하고 값을 대입한다. Syntax & Documentations의 TABLE - PROPS 항목을 보고 원하는 것을 골라 작성해 준다.

6. 마지막으로, Rodal 개발자의 github에서 rodal.css 파일을 경로에 복사하여 CSS 상 필요한 부분을 수정 또는 추가하고, 대입해주면 된다!

e.g.

import React, { Component } from 'react';
import Rodal from 'rodal';
import './rodal.css';
import './App.css';
class App extends Component{
  constructor(props){
    super(props);
    this.state = {
      visible: false
    };
  }
  show(){
    this.setState({ visible: true });
  }
  hide(){
    this.setState({ visible: false });
  }
	render(){
		return(
		<React.Fragment>
			<div className="outermost">
              <div className="header">
                  <b>FIXED-HEADER :: DEV-PARK</b>
              </div>
        <div className="wrapper">
          <div className="container">
              <div className="order-btn-wrapper" onClick={ this.show.bind(this) } >
                  <div className="order-btn" id="order-btn">STICKY-BUTTON</div>
              </div>
              <Rodal visible={ this.state.visible } onClose={ this.hide.bind(this) } 
                     className="rodal-slideDown-enter rodal-outermost" animation="slideDown" width="280" height="164"
                     showCloseButton="false" >
                <div className="rodal-container">
                <div className="rodal-wrapper">
                  <span className="rodal-msg">
                    LOREM
                    <br/>
                    IPSUM NEQUE EST!
                    <br/>
                  </span>
                </div>
                    <a href="" className="rodal-link">READ MORE</a>
                    <div className="rodal-hr">
                      </div>
                      <span className="rodal-confirm" onClick={ this.hide.bind(this) }>
                        OKAY
                        </span>
                    </div>
              </ Rodal>
...

RESULT