React Native에서 로딩 인디케이터(ActivityIndicator) 표시하는 방법

로딩 인디케이터(Loading Indicator)는 UI에서 처리 중인 요청이 완료되기까지 시간이 걸린다는 사실을 사용자에게 알려주는 역할을 합니다. 예를 들어 폼 작성 후 제출 버튼을 클릭했거나, 데이터를 불러오기 위해 검색 버튼을 눌렀을 때 유용하게 사용됩니다.

React Native는 ActivityIndicator 컴포넌트를 기본으로 제공하며, 이를 활용하면 다양한 방식으로 화면에 로딩 인디케이터를 손쉽게 표시할 수 있습니다.

ActivityIndicator 기본 사용법

가장 기본적인 ActivityIndicator 컴포넌트의 사용 형태는 다음과 같습니다.

<ActivityIndicator animating={animating} color='#bc2b78' size="large" style={yourStyle}/>

ActivityIndicator를 사용하려면 먼저 아래와 같이 react-native에서 임포트해야 합니다.

import { ActivityIndicator } from 'react-native';

ActivityIndicator 주요 속성(Props)

예제: 로딩 인디케이터 표시하기

로딩 인디케이터는 ActivityIndicator를 통해 구현되므로, 먼저 필요한 컴포넌트들을 임포트합니다.

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

여기서 사용된 ActivityIndicator 컴포넌트는 다음과 같습니다.

<ActivityIndicator
    animating={animating}
    color='#bc2b78'
    size="large"
    style={styles.activityIndicator}/>

animating 값은 기본값이 true인 state 변수에 연결됩니다. closeActivityIndicator 메서드는 componentDidMount() 함수 내부에서 호출되며, 60초(1분)가 지난 후 animating 상태를 false로 변경하여 인디케이터를 숨깁니다.

state = { animating: true }
closeActivityIndicator = () => setTimeout(() => this.setState({
    animating: false }), 60000)
componentDidMount = () => this.closeActivityIndicator()

다음은 로딩 인디케이터를 화면에 표시하는 전체 코드입니다.

import React, { Component } from 'react';
import { ActivityIndicator, View, StyleSheet } from 'react-native';
class ActivityIndicatorExample extends Component {
    state = { animating: true }
    closeActivityIndicator = () => setTimeout(() => this.setState({
        animating: false }), 60000)
    componentDidMount = () => this.closeActivityIndicator()
    render() {
        const animating = this.state.animating
        return (
            <View style={styles.container}>
                <ActivityIndicator
                    animating={animating}
                    color='#bc2b78'
                    size="large"
                    style={styles.activityIndicator}/>
            </View>
        )
    }
}
export default ActivityIndicatorExample
const styles = StyleSheet.create ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 70
    },
    activityIndicator: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 80
    }
})

실행 결과