[React Native] React Native Paper

 

 

 

 

 

리액트 네이티브 앱에서 사용할 수 있는

유용한 UI 컴포넌트 라이브러리들 중에서,

 

현재 진행 중인 프로젝트에서 사용되는 React Native Paper 에

대해서 짧막하게 정리하는 시간을 가지려 한다.

 

설명에 들어가기에 앞서 다양한 컴포넌트 라이브러리들 중

현 트랜드를 잘 반영하여 보여주는 이미지를 가져왔다.

 

 

https://www.npmtrends.com/react-native-paper-vs-native-base-vs-react-native-elements-vs-react-native-material-ui-vs-react-native-ui-kitten%EF%BB%BF

 

 

위 통계 자료에서 볼 수 있듯이  근 1년간 React Native Paper 는

꾸준한 상승세를 보여왔다.

 

리액트 네이티브를 위한 디자인 라이브러리로 공식 문서도 잘 정리되어있고,

사용자의 수도 많아서 사용에 무리는 없을 듯 하다.

 

 

 

---

 

 

React Native Paper

 

본격적으로 알아보자.

이는 Material Design 가이드 라인을 따르는 크로스 플랫폼 UI 컴포넌트 라이브러리다.

번들 크기를 줄이기 위한 글로벌 테마 지원 및 선택적 babel-plugin 도 있다.

 

크로스 플랫폼인 만큼, 웹과 모바일 모두에서 작동한다.

거의 모든 사용 사례시나리오에 적합한 구성 요소와 상호작용이 있다.

애니메이션, 접근성 및 UI 로직을 포함한 대부분의 세부 사항이 처리된다.

 

즉, 플랫폼별 가이드 라인에 따라 iOS 와 Android 모두에서 작동하며

전체 테마 지원도 제공한다.

 

더불어 공식 문서가 정말 꼼꼼하게 작성되어있는데,

아래 이미지와 같이 라이트 모드 / 다크 모드 별로 구분되어 적용된 모습을 볼 수 있다.

 

 

light mode

 

dark mode

 

 

 

React Native Paper Component

공식 문서에서 하나씩 컴포넌트를 살펴볼 수도 있지만,

모바일 애플리케이션으로 다운받아서 볼 수도 있으니 더욱 간편하게

컴포넌트를 확인하고 싶다면 다운로드 하는 것을 권장한다 !

(expo 만 있다면 빠른 시간 내에 확인할 수 있 다 🏍)

 

• Android 구글 플레이 스토어
• iOS 앱 스토어
• Expo 앱
• Snack

 

 

---

 

 

Getting Started Paper 🚀

해당 라이브러리를 사용하기 위해 프로젝트 폴더 내에 터미널 창을 키자.

그리고 아래 명령어를 작성하자.

$ npm install react-native-paper

or

$ yarn add react-native-paper

 

Theming  🎨

(1) Applying a theme to the whole app

커스텀 테마를 지원하기 위해, paper 는 Provider 컴포넌트를 내보낸다.

이를 위해 Provider 로 root 컴포넌트를 감싸준다.

import * as React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import App from './src/App';

export default function Main() {
  return (
    <PaperProvider>
      <App />
    </PaperProvider>
  );
}

 

(2) Applying a theme to a paper component

라이브러리에서 특정 컴포넌트에 대한 테마를 변경하려면,

테마 prop을 컴포넌트로 직접 전달할 수 있다. 

 

prop 이 공급자로부터 테마와 병합될 때 전달된 테마는 다음과 같다.

props = 변하지 않는 데이터로, 상위 컴포넌트에서 하위 컴포넌트로 데이터를 넘겨줄 때 사용한다.
상위 컴포넌트 / <컴포넌트이름 props이름 = "값">
하위 컴포넌트 / {this.props.props이름}

import * as React from 'react';
import { Button } from 'react-native-paper';

export default function ButtonExample() {
  return (
    <Button raised theme={{ roundness: 3 }}>
      Press me
    </Button>
  );
}

 

(3) Using the theme in your own components

자체 구성요소에 테마가 접근하기 위해서,

라이브러리에서 내보낸 withTheme HOC 을 사용할 수 있다.

 

구성요소를 HOC 으로 감싸면 테마가 prop으로 제공된다.

HOC = 컴포넌트 로직을 재사용하기 위한 React 의 고급 기술로,
컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다.

import * as React from 'react';
import { withTheme } from 'react-native-paper';

function MyComponent(props) {
  const { colors } = props.theme;
  return <Text style={{ color: colors.primary }}>Yo!</Text>;
}

export default withTheme(MyComponent);

 

 

withTheme 으로 감싸진 컴포넌트는 Provider 및 theme prop 에서 테마를 지원한다.

더불어 useTheme hook 을 사용할 수 있다.

Hooks = 클래스 형태였던 컴포넌트를 function을 통해 만들 수 있게 해주는 API로,
코드의 가독성이 좋아지고 component의 재사용성이 간편해진다.

import * as React from 'react';
import { Button } from 'react-native-paper';

export default function FancyButton(props) {
  return <Button theme={{ fonts: { medium: 'Open Sans' } }} {...props} />;
}

 

(4) Customizing all instances of a component

paper 컴포넌트를 커스터마이징하기 위해 따로 필요한 API 는 없다.

아래와 같이 작성하면 Paper 의 Button 대신 FancyButton 을 어디서든 사용할 수 있다.

import * as React from 'react';
import { Button } from 'react-native-paper';

export default function FancyButton(props) {
  return <Button theme={{ fonts: { medium: 'Open Sans' } }} {...props} />;
}

 

 

나름 페이퍼에 대해서, 사용하는 방법에 대해서 정리해보았다!

코드 분석 계속 해나가면서 . .

 

또 새롭게 알게 된 점이 생긴다면

꾸준히 추가해보겠다 . .

 

 

 

 

© 참고

https://github.com/callstack/react-native-paper (react native paper 공식문서)

https://reactnativepaper.com/ (react native paper 공식 홈페이지)

https://fourier.dev/translation/2018/08/17/translation-React-Native-Component-Libraries.html (2018년 당신이 알아야 할 리액트 네이티브 컴포넌트 라이브러리 11가지)

GitHub - callstack/react-native-paper: Material Design for React Native (Android & iOS)