패스트캠퍼스 챌린지 25일차 - 리액트 UI라이브러리 (Onsen UI)

 

 

OnsenUI

 

하이브리드앱과 모바일에 특화된 UI 라이브러리이다. (JS, 앵귤러, 뷰, 리액트 모두 지원한다.)

npm install onsenui react-onsenui --save

 

OnsenUI도 스타일링 라이브러리처럼 install 후에 모듈을 import하여 사용하면 되지만,

UI를 적용하려면 index.html에 css를 import 해주어야한다. (사용될 컴포넌트에 import, 또는 전역에서 사용한다면 App.js에 import)

Onsen 뿐 아니라 UI 라이브러리는 대부분 css파일이 따로 있어서 import 해주어야된다고 한다.

 

import { Page, Toolbar, Button } from 'react-onsenui'; // Only import the necessary components
// import * as Ons from 'react-onsenui'; // Import everything and use it as 'Ons.Page', 'Ons.Button'

// Webpack CSS import
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

OnsenUI의 기본 형태는 Page 컴포넌트에 모든 UI 컴포넌트가 감싸져 있어야 한다.

각 컴포넌트마다 required(필수) prop과 optional(선택) prop이 존재한다.

 

강의에서는 OnsenUI documents에 나와있는대로 css가 적용되어 나왔는데,

실습해보니 React.StrictMode가 적용되면서 findDOMNode 사용이 불가능해져 일부 적용이 안되는 현상이  발생했다. 

<Page> 바깥으로 ui컴포넌트를 빼내어보기도 하고 <></>로 감싸보기도 했지만 css를 적용할 수 없었다.

공식문서에도 이에 대한 대처나 방안이 따로 마련되어 있지 않아보였다.

 

 

OnsenUI 강의가 총 3개(약 50분)인데 첫강의에서 react에 적용안되는 것을 보고

다른 라이브러리에서 반응형이나 모바일에 대응이 쉽다면 절대 안쓸것 같다고 생각이 들었고, 나머지 두 강의는 스킵했다.

 

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.