[RN] 데이터 로딩 UI를 자연스럽게 구성해보자

임찬혁·2023년 1월 19일
5

React Native

목록 보기
5/6
post-thumbnail

로딩 UI는 왜 필요할까?

앱에서 데이터를 서버 및 로컬로부터 불러오는 경우가 많은데 이런 작업들은 대부분 비동기로 동작합니다. 로딩 UI가 구성되어있지 않으면 사용자들은 데이터가 다 불러와지기 전에 다른 행동을 할 여지가 있고, 이 행동은 에러로 이어질 수 있습니다.
기대하지않은 에러를 방지하고 좀 더 깔끔한 사용자 경험을 제공하기 위해 데이터를 불러오는 동안에는 로딩 UI를 보여주는 것이 일반적입니다.

로딩 UI는 어떤 것들이 있을까?

앱에서의 로딩 UI는 보통 Activity IndicatorSkeleton 을 주로 사용합니다.

  • Activity Indicator

  • Skeleton

이번 포스트에서는 각각의 로딩 UI를 간단하게 구성해보겠습니다.

Activity Indicator

Activity IndicatorReact Native 에서 기본으로 제공해주는 API 가 있는데, 사용법은 너무 간단합니다.
ActivityIndicator 를 import하고 컴포넌트에 추가하면 됩니다.

import { ..., ActivityIndicator } from 'react-native';

//...

const App = () => {
  
  // ...
  
  return (
  	<View>
      <ActivityIndicator />
    </View>
  );
};

  • 크기 바꾸기
    size 속성에 small, large 값을 적용하면 Activity Indicator 의 크기를 변경할 수 있습니다. default 값은 small 입니다.
<ActivityIndicator size="small" />
<ActivityIndicator size="large" />

  • 색상 바꾸기
    color 속성에 색상값을 적용하면 Activity Indicator 의 색상을 변경할 수 있습니다. defualt 값은 iOS는 #999999 이고, Android는 null (시스템 기본 색상값) 입니다.
<ActivityIndicator size="small" color="orange" />
<ActivityIndicator size="large" color="#0055AA" />

Skeleton

SkeletonReact Native 에서 기본으로 제공해주는 API가 없어서 외부 패키지를 사용해 구성할 수 있습니다.
구글에서 검색하면 상위에 react-native-skeleton-contentreact-native-skeleton-placeholder 등의 패키지가 나오는데, 여기서는 react-native-skeleton-placeholder 를 사용하겠습니다.

먼저, 해당 패키지의 Installation 프로세스를 따라 프로젝트에 패키지를 추가합니다.

Step 1

  • Using yarn:
yarn add @react-native-masked-view/masked-view react-native-linear-gradient
  • Using npm:
npm install @react-native-masked-view/masked-view react-native-linear-gradient --save
  • 0.60 버전 이하의 react-native인 경우에 링크를 위해 아래 커맨드를 추가로 실행합니다.
react-native link @react-native-masked-view/masked-view react-native-linear-gradient
  • iOS의 경우에는 아래 커맨드를 추가로 실행합니다.
npx pod-install

Step 2

  • Using yarn:
yarn add react-native-skeleton-placeholder
  • Using npm
npm install react-native-skeleton-placeholder --save

패키지 추가를 완료하였으면 Usage 를 따라 코드에 적용하면 됩니다.

  • Skeleton 적용하기
    사용 방법은 SkeletonPlaceholder.Item 을 사용하는 방법과 기존의 React Native 처럼 View, Text, Image 를 사용하는 방법이 있습니다. 익숙한 기존의 개발경험을 따라가기 위해 후자로 진행하겠습니다.
    SkeletonPlaceholder 를 import하고 컴포넌트에 추가합니다.
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

// ...

const App = () => {
  return (
    <SkeletonPlaceholder>
    </SkeletonPlaceholder>
  );
};
  • Skeleton 구성하기
    SkeletonPlaceholder 의 child에 Skeleton 컴포넌트를 구성합니다. 기존의 React Native 컴포넌트를 구성하는 방식과 같은 방식으로 구성하면 됩니다. 주의할 점은 SkeletonPlaceholder 의 child element는 하나만 있어야 합니다.
<SkeletonPlaceholder>
  <View style={{ width: 50, height: 50 }} />
</SkeletonPlaceholder>

<SkeletonPlaceholder>
  <View style={{ alignItems: 'center' }}>
    <View style={{ width: 50, height: 50 }} />
    <View style={{ width: 120, height: 40, marginTop: 10 }} />
  </View>
</SkeletonPlaceholder>

  • Skeleton 스타일 적용하기
    SkeletonPlaceholder 에 제공되는 속성으로 스타일을 적용할 수 있습니다. borderRadiusbackgroundColor 속성을 설정해보겠습니다.
<SkeletonPlaceholder borderRadius={10}>
  <View style={{ alignItems: 'center' }}>
    <View style={{ width: 50, height: 50 }} />
    <View style={{ width: 120, height: 40, marginTop: 10 }} />
  </View>
</SkeletonPlaceholder>

<SkeletonPlaceholder backgroundColor={'orange'}>
  <View style={{ alignItems: 'center' }}>
    <View style={{ width: 50, height: 50 }} />
    <View style={{ width: 120, height: 40, marginTop: 10 }} />
  </View>
</SkeletonPlaceholder>

마치며

로딩 UI는 앱에 꼭 필요한 요소 중 하나입니다. 상황에 따라 자연스러운 로딩 UI를 제공함으로써 기대하지 않은 사이드이팩트를 줄이고, 좀 더 완성도 높은 앱이라는 느낌을 제공할 수 있습니다.

profile
개발새발자

1개의 댓글

comment-user-thumbnail
2023년 8월 18일

감사합니다!

답글 달기