[React Native] 로딩 스피너(Loading Spinner) 만들기

로딩 스피너(Loading Spinner) 만들기

들어가며

• 리액트 네이티브(React Native) 개발 중, 간단하게 로딩 스피너(Loading Spinner)를 만드는 방법을 정리해본다.

 

방법

ActivityIndicator 이용하기

• 리액트 네이티브 자체적으로 제공하는 @ActivityIndicator@를 이용하여 간단하게 로딩 스피너를 만들 수 있다.

 

① 로딩 스피너 컴포넌트 만들기

• 로딩 스피너는 @ActivityIndicator@ 컴포넌트를 이용하여 만들 수 있다.

import { View, ActivityIndicator, StyleSheet } from 'react-native';


function LoadingOverlay() {
  return (
    <View style={styles.container}>
      <ActivityIndicator size='large' color='white' />
    </View>
  );
}

export default LoadingOverlay;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 24,
  },
});

 

② 컴포넌트에 적용하기

• 로딩 스피너를 적용하고자 하는 컴포넌트에 다음과 같이 적용시킨다.
• 보통 백엔드(서버)에서 데이터를 불러올 때 시간이 걸릴 경우 로딩 스피너를 표시해준다.

import { useState } from 'react';

import LoadingOverlay from '../components/UI/LoadingOverlay';

function MyComponent() {
  const [isFetching, setIsFetching] = useState(true);

  useEffect(() => {
    // 백엔드에서 내용 가져오기
    async function getExpenses() {
      setIsFetching(true);
      const expenses = await fetchExpenses();
      setIsFetching(false);
      expensesContext.setExpenses(expenses);
    }

    getExpenses();
  }, []);

  // 로딩 스피너 표시
  if (isFetching) {
    return <LoadingOverlay />;
  }
  
  // ...

  return (<> ... </>);
}

export default MyComponent;

 

(참고) ActivityIndicator 사용 예제

• @size@ 옵션과 @color@ 옵션을 이용하여 로딩 스피너의 사이즈와 색상을 지정할 수 있다.

import React from 'react';
import {ActivityIndicator, StyleSheet} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const App = () => (
  <SafeAreaProvider>
    <SafeAreaView style={[styles.container, styles.horizontal]}>
      <ActivityIndicator />
      <ActivityIndicator size="large" />
      <ActivityIndicator size="small" color="#0000ff" />
      <ActivityIndicator size="large" color="#00ff00" />
    </SafeAreaView>
  </SafeAreaProvider>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10,
  },
});

export default App;

 

 

참고 사이트

ActivityIndicator · React Native