[TIL 51] Framework 7

sunny·2021년 5월 25일

Framework 7 React TIL

인턴십에서 하이브리드앱개발 라이브러리인 Framework7을 사용해볼 수 있게 되어서 블로깅해보고자 한다!

Framework 7

안드로이드와 IOS 앱 개발을 동시에 함으로써 개발 생산성을 높이는 하이브리드앱 개발툴

난 무조건 안드로이드와 ios는 따로 개발해야하는 줄 알았는데 한번에 개발할 수 있는 라이브러리가 있다니..! 심지어 데스크탑도 지원함.. !

App Layout

index.html

<!DOCTYPE html>
<html>
  <head>
   ...
    <title>SUNFUME</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

<div id="app"></div> : framework7의 최상위
app이란 id를 가진 div태그안에 framework7 으로 구성한 화면들이 들어간다.

App.tsx

// App.jsx
import { App, View, Page } from 'framework7-react';

export default () => (
  <App theme="auto" name="My App" id="com.demoapp.test">
    <View main>
      <Page>
        {/* Page Content */}
      </Page>
    </View>
  </App>
)

App안에 View. View안에 Page의 구조로 되어있다.
앱은 웹과 다르게 페이지가 누적이 되기 때문에 페이지가 쌓일때마다 Page가 어떤형태로 변화하는지 잘 알아둘 필요성이 있다.

현재페이지일 경우 Page의 class로 page-current가 추가되고, 페이지가 이동될 경우 그 전 Page는 page-previous의 class가 붙는 방식으로 동작한다.

app.ts

import React from 'react';
import ReactDOM from 'react-dom';
import Framework7React from 'framework7-react';
import Framework7 from '@js/framework7-custom';
import '@styles/framework7-custom.less';
import '@styles/icons.css';
import '@styles/app.less';
import App from '@components/App';

//framework7을 사용
Framework7.use(Framework7React);
ReactDOM.render(React.createElement(App), document.getElementById(

React Component Extensions

f7ready : f7 페이지가 완벽하게 intialized된 후에 실행하는 함수

 useEffect(() => {
    f7ready((f7) => {
      f7.dialog.alert('Component mounted');
    })
  }, []);

f7route, f7router

react에서 f7을 쓸 때는 반드시 f7에게 router를 명시적으로 제공해야한다.

const f7params = {
  name: 'My App',
  id: 'com.myapp.test',
  // f7params안에 routes를 넣어 전달한다.
  routes: [
    {
      path: '/',
      component: HomePage,
    },
    {
      path: '/about/',
      component: AboutPage,
    },
    {
      path: '/login/',
      component: LoginPage,
    },
  ],
};

export default () => (
  <App { ...f7params }>
    <View main url="/" />
  </App>

내 경우 routes/index.ts에서 routes를 지정하고

const routes = [
  { path: '/', component: HomePage },
  { path: '/users/sign_in', component: LoginPage },
  { path: '/users/sign_up', component: SignUpPage },
  { path: '/users/:id', component: UserInfoPage },
  { path: '/category/:id', component: ItemIndexPage },
  { path: '/items/:id', component: ItemDetailPage },
  { path: '/cart', component: CartPage },
  { path: '/order', component: OrderPage },
  { path: '/order/list', component: OrderListPage },
  { path: '/like', component: LikeListPage },
  { path: '/review', component: ReviewPage },
  { path: '/mypage', component: MyPage },
  //routes는 위에서 아래로 읽기 때문에 이 위의 경로가 아닐 경우 무조건 NotFoundPage를 띄운다.
  { path: '(.*)', component: NotFoundPage },
];

export default routes;

App.tsx에서 import한 후 f7parmas로 전달해주었다.

const f7params = {
    name: 'SUNFUME',
    theme: 'ios',
    id: 'com.insomenia.practice',
    routes,
    input: {
      scrollIntoViewOnFocus: device.capacitor,
      scrollIntoViewCentered: device.capacitor,
    },
    statusbar: {
      iosOverlaysWebView: true,
      androidOverlaysWebView: false,
    },
    view: {
      iosDynamicNavbar: device.ios,
    },
};

Events

라이프사이클 관련

export default () => {
  
  // 페이지 들어가기 전
  const onPageBeforeIn = () => {}

  // 페이지 들어갈때
  const onPageInit = () => {}

  return (
    <Page onPageBeforeIn={onPageBeforeIn} onPageInit={onPageInit}>
      ...
    </Page>
  )
}

sunny

blog 👉🏻 https://kimnamsun.github.io/

이전 포스트

[TIL 50] React | Formik과 Yup으로 form 핸들링

다음 포스트