React + OnsenUI for React의 기본 컴포넌트① (Page・Button편)

개요


  • OnsenUI는 Asial사가 개발하고 있는 퍼포먼스 향상 + 스마트폰 UI를 제공하는 하이브리트 앱 제작의 프레임워크.
  • 지금까지 OnsenUI에서 하이브리드 앱을 개발할 때는 OnsenUI 1.x (AngularJS 1.x 기반)에서 개발했지만 React에서도 쓰고 싶었기 때문에 OnsenUI 2.x (OnsenUI for React) 의 각종 ReactComponent의 사용법에 대해 정리한다.
  • React의 복습도 포함해, 정중하게 이해하고 싶었기 때문에, 2,3개의 Component마다 기사를 만든다.



  • Component



    우선, 이번에 작성한 소스입니다.

    src/button.jsx
    
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Page, Button } from 'react-onsenui';
    
    export default class TodosApp extends React.Component {
      render() {
        return (
          <Page>
            <Button
              modifier="material"
            >
            Tap Me!
            </Button>
          </Page>
        );
      }
    }
    

    Page Component



    OnsenUI 1.x의 에 해당하는 구성 요소입니다.
    , , 등의 화면의 구성을 실시하는 컴퍼넌트의 아이 컴퍼넌트로서 존재합니다.

    Page 컴포넌트 내에서 를 사용하려면,
    Page 구성 요소의 props로 renderToolbar(fn)를 나열합니다.
    (모달 버전의 renderModal(fn)도 존재합니다.)

    page.jsx
    ...
      render() {
        return (
          <Page
            renderToolbar={() =>
              <Toolbar>
                <div>Title</div>
              </Toolbar>
            }
          >
          </Page>
        );
      }
    ...
    

    Props



    PageComponent는 이벤트 드리븐으로 페이지 변경에 따라 이벤트를 취할 수 있습니다.
    이벤트 설명도 Page 구성 요소의 props에 나열됩니다.


    Props
    Description


    modifier
    Props 값을 변경하여 외형을 변경합니다.

    renderToolbar={fn}
    Page에 Toolbar를 render한다.

    renderModal={fn}
    Page에 Modal를 render한다.

    onInit={fn}
    Page가 DOM에 생성된 후 한 번만 발화.

    onShow={fn}
    페이지가 화면에 나타난 후 발화.

    onHide={fn}
    페이지가 화면에서 사라진 후 발화.


    각 Component에는 [modifier]라는 props가 있습니다.
    modifier를 변경하면 OnsenUI에 preset으로 들어있는 스타일 등이 반영됩니다.
    대부분의 modifier는 Optional입니다만, 잘 쓰면 iOS와 Android의 전환 등,
    이미지대로 UI를 바로 만들 수 있습니다.

    수정자




    수정자
    Description


    material
    머티리얼 디자인 스타일로 페이지 변경


    Button Component



    다음은 Button 구성 요소입니다.
    OnsenUI 1.x의 에 해당하는 Component입니다.

    Props




    Props
    Description


    modifier
    Props 값을 변경하여 외형을 변경합니다.

    disabled
    Disabled 상태로 변경합니다.

    ripple
    waveEffect를 곱한다.

    onClick={fn}
    클릭하면 콜백을 실행합니다.


    수정자



    modifier를 변경하는 것으로, 다양한 버튼을 표현하는 것이 가능합니다.


    수정자
    Description


    outline
    외부 선만 배경이 투명한 버튼


    눈에 띄지 않는 버튼

    quiet
    외부 선이 없고 배경도 투명한 버튼

    cta
    눈에 띄는 버튼 (명도가 높아집니다)


    큰 버튼

    large--quiet
    크고, 외선도 없고, 배경도 투명한 버튼

    large--cta
    크고 눈에 띄는 버튼

    material
    머티리얼 디자인 버튼

    material--flat
    외부 선이 없고 배경도 투명한 머티리얼 디자인 버튼




    ReactNative에 감도가 있었습니다만, 좀 더 사양이 굳어지고 나서 하려고 하고,
    OnsenUI 2.x에 먼저 걸었습니다.

    Angular 기반의 OnsenUI 1.x에서 앱 개발을 경험한 사람이라면,
    OnsenUI 2.x 자체에는 원활하게 들어가는 것이 가능하다고 생각합니다.

    계속은 다음 번.

    -P.S.-
    OnsenUI의 Onsen의 기원은
    【Onsen -> SPA(스파) -> Single Page Application】
    에서 온 것 같습니다.
    꽤 뾰족한 상태로 재미 있습니다.

    링크


  • 【본가】Onsen UI for React
  • 【본가】 PageComponent
  • 【본가】ButtonComponent
  • 좋은 웹페이지 즐겨찾기