앱에서 데이터를 서버 및 로컬로부터 불러오는 경우가 많은데 이런 작업들은 대부분 비동기로 동작합니다. 로딩 UI가 구성되어있지 않으면 사용자들은 데이터가 다 불러와지기 전에 다른 행동을 할 여지가 있고, 이 행동은 에러로 이어질 수 있습니다.
기대하지않은 에러를 방지하고 좀 더 깔끔한 사용자 경험을 제공하기 위해 데이터를 불러오는 동안에는 로딩 UI를 보여주는 것이 일반적입니다.
앱에서의 로딩 UI는 보통 Activity Indicator
와 Skeleton
을 주로 사용합니다.
Activity Indicator
Skeleton
이번 포스트에서는 각각의 로딩 UI를 간단하게 구성해보겠습니다.
Activity Indicator
는 React 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
은 React Native
에서 기본으로 제공해주는 API가 없어서 외부 패키지를 사용해 구성할 수 있습니다.
구글에서 검색하면 상위에 react-native-skeleton-content 와 react-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 를 따라 코드에 적용하면 됩니다.
SkeletonPlaceholder.Item
을 사용하는 방법과 기존의 React Native
처럼 View
, Text
, Image
를 사용하는 방법이 있습니다. 익숙한 기존의 개발경험을 따라가기 위해 후자로 진행하겠습니다.SkeletonPlaceholder
를 import하고 컴포넌트에 추가합니다.import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
// ...
const App = () => {
return (
<SkeletonPlaceholder>
</SkeletonPlaceholder>
);
};
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>
SkeletonPlaceholder
에 제공되는 속성으로 스타일을 적용할 수 있습니다. borderRadius
와 backgroundColor
속성을 설정해보겠습니다.<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를 제공함으로써 기대하지 않은 사이드이팩트를 줄이고, 좀 더 완성도 높은 앱이라는 느낌을 제공할 수 있습니다.
감사합니다!