Notion의 Libraries & API 통합 페이지 바로가기
Rodal: github
Rodal: A React Modal of Animations
A React Modal with animations.
React + Modal의 합성어로, 9가지 종류의 애니메이션 효과를 가진 Modal을 react로 손 쉽게 띄우고, 제어할 수 있는 라이브러리이다. 코드를 뜯어보면 각 애니메이션 별로 CSS properties 및 Keyframe Animation이 Enter/Leave의 한 쌍으로 이루어져 구현이 되어있으며, 이 CSS Stylesheet는 사용자가 입맛에 맞게 제한 없는 수정이 가능하므로 그 자유도 및 활용도가 매우 높다. 또한 설치 및 사용도 굉장히 쉬운 편이라, 각 기능 별 상세한 Documentation이 존재하지 않았는데도 React를 학습한 지 고작 3일된 나도 Zeplin으로 넘겨 받은 디자인 그대로 Modal을 수정하고, 제어할 수 있었다.
npm i rodal --save
설치는 매우 간단하다. npm을 사용하여 설치하는 경우 command 창에 위의 코드를 입력하면 바로 설치되며, 시간도 오래 걸리지 않는다. 참고로 yarn을 통한 설치 역시 지원한다.
Props
Animation Types
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 항목을 보고 나면 이해가 될 것이다:
사용 방법은 아주 쉽다:
Constructor 내부에 Rodal의 ENTER/LEAVE를 제어할 visible 이라는 이름의 state를 선언해 준다.
Rodal의 ENTER/LEAVE를 제어할 메소드를 각각 선언하고 setState 구문을 설정해 준다. 참고로 visible은 boolean 타입으로, visible: true 일 때, Rodal은 화면에 노출될 것이며 visible: false 일 때 Rodal은 화면에 노출된 상태에서 사라지게 된다. 따라서, 이들 메소드를 호출해 주면 boolean 타입으로 Constructor 내부에 선언한 state - visible의 상태를 변경할 수 있게 되는 것이다.
<Rodal>
을 선언해주고, 내부의 구성 요소들을 필요에 따라 배치한다. state로 선언한 visible을 Rodal의 property인 visible에 대입하는데, 이 때 선언구는 <Rodal visible={ this.state.visible }>
의 형식으로 작성한다. 이는 state의 visible이라는 값의 현재 상태를 Rodal 객체의 prop:visible에 대입한다는 의미이다.
이번엔 leave 설정을 위해서 onClose={ this.hide.bind(this) }
를 작성해 준다. 여기서 onClose prop은 Rodal 창을 닫기 위해 핸들링하기 위함이고, 위에서 선언한 hide 메소드의 this를 이 onClose={}
prop에 값으로써 대입한다는 의미이다.
<Rodal>
태그의 내부에 추가적인 props를 입맛에 맞게 선언하고 값을 대입한다. Syntax & Documentations의 TABLE - PROPS
항목을 보고 원하는 것을 골라 작성해 준다.
마지막으로, 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