스플래시 스크린 적용하기! 근데 이제 chatGPT를 곁들인..

chatGPT가 화제이다. 지금은 베타 오픈 기간(?)이라 이것 저것 심심할 때 마다 질문을 하고있는데, 이번에는 한창 공부중인 리액트 네이티브 관련된 내용을 물어보았다.

질문은 다음과 같다. "react native에서 앱 실행시 로딩 화면 만드는 코드 알려줘"

아래는 chatGPT의 답변 그대로 옮겨왔다.

---

React Native에서 앱 실행 시 로딩 화면을 만드는 가장 일반적인 방법은 앱이 시작할 때 첫 번째 화면으로 스플래시 스크린을 정의하고 이를 사용하는 것입니다. 스플래시 스크린은 일반적으로 앱의 로고와 같은 간단한 정보를 표시합니다.
스플래시 스크린을 정의하려면, 먼저 새로운 컴포넌트를 작성해야 합니다. 이 컴포넌트는 앱이 시작할 때 첫 번째로 보여질 화면입니다. 일반적으로 이 컴포넌트는 SplashScreen이라고 이름 짓기도 합니다.

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

const SplashScreen = () => {
  return (
    <View style={styles.container}>
      <Text>My App</Text>
    </View>
  );
}

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

export default SplashScreen;

그 다음으로, 이 컴포넌트를 앱의 첫 번째 화면으로 설정해야 합니다. 이를 위해 App.js 파일을 열고, App 컴포넌트의 return 부분을 수정합니다.

import React from 'react';
import SplashScreen from './SplashScreen';

const App = () => {
  return (
    <SplashScreen />
  );
}

export default App;

이제 앱을 시작할 때 SplashScreen 컴포넌트가 첫 번째로 보여질 것입니다.

하지만, 일반적인 스플래시 스크린은 앱이 시작할 때 잠시 보여지고 자동으로 사라집니다. 이를 위해서는 앱이 시작한 후 잠시 기다리고 스플래시 스크린을 제거해야 합니다. 이를 위해 useEffect 훅과 setTimeout 함수를 사용할 수 있습니다.

import React, { useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';

const SplashScreen = ({ navigation }) => {
  useEffect(() => {
    setTimeout(() => {
      navigation.navigate('Home');
    }, 2000);
  }, []);

  return (
    <View style={styles.container}>
      <Text>My App</Text>
    </View>
  );
}

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

export default SplashScreen;

이제 앱이 시작할 때 스플래시 스크린이 2초간 보여지고, 2초 후에 Home 화면으로 전환됩니다.
기본적인 스플래시 스크린의 구현은 이와 같습니다

이어서, 스플래시 스크린을 좀 더 자세히 커스터마이징하고 싶다면 아래와 같은 사항들을 추가할 수 있습니다.

스플래시 스크린의 배경색을 지정할 수 있습니다. 이를 위해서는 View 컴포넌트의 style 객체에 backgroundColor 속성을 추가합니다.

<View style={{ ...styles.container, backgroundColor: '#fff' }}>
  <Text>My App</Text>
</View>

스플래시 스크린에 이미지를 추가할 수 있습니다. 이를 위해서는 Image 컴포넌트를 사용합니다.

스플래시 스크린을 보여주는 시간을 지정할 수 있습니다. 위 예제에서는 2초가 지정되어 있지만, 이를 원하는 시간으로 조절할 수 있습니다. 예를 들어 3초로 설정하려면 'setTimeout' 함수의 두 번째 인자를 3000으로 수정하면 됩니다.

  useEffect(() => {
    setTimeout(() => {
      navigation.navigate('Home');
    }, 3000);
  }, []);

계속해서 스플래시 스크린을 커스터마이징하고 싶다면, 아래와 같은 사항들도 추가할 수 있습니다.

스플래시 스크린에 제목과 설명을 추가할 수 있습니다. 이를 위해서는 Text 컴포넌트를 추가하고, 적절한 스타일을 적용합니다.

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

const SplashScreen = () => {
  return (
    <View style={styles.container}>
      <Image source={require('./logo.png')} />
      <Text style={styles.title}>My App</Text>
      <Text style={styles.description}>Welcome to my app</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  description: {
    marginTop: 10,
    fontSize: 16,
    color: '#666',
  },
});

export default SplashScreen;

스플래시 스크린에 진행률 상태를 표시할 수 있습니다. 이를 위해서는 ProgressBar 컴포넌트를 사용합니다. 일반적으로 스플래시 스크린은 앱이 시작할 때 잠시 기다리기만 할 수 있기 때문에, 진행률은 일반적으로 0%에서 100%까지 지정하기가 어렵습니다

그래서 일반적으로 스플래시 스크린에서는 진행률을 시각적으로 표현하기 위해 원형 진행률 상태 위젯(circular progress indicator)을 사용합니다. 이는 앱이 시작할 때 잠시 기다리는 것을 시각적으로 표현할 수 있기 때문입니다.

원형 진행률 상태 위젯을 추가하려면, ActivityIndicator 컴포넌트를 사용합니다.

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

const SplashScreen = () => {
  return (
    <View style={styles.container}>
      <Image source={require('./logo.png')} />
      <Text style={styles.title}>My App</Text>
      <ActivityIndicator size="large" color="#333" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 20,
  },
});

export default SplashScreen;

이렇게 원형 진행률 상태 위젯을 추가하면, 앱이 시작할 때 잠시 기다리는 것을 시각적으로 표현할 수 있습니다. 이 외에도 스플래시 스크린을 커스터마이징하는 방법은 여러 가지가 있으니, 상황에 맞게 추가적으로 커스터마이징 할 수 있습니다

---

한 번에 이렇게 까지 장황하게 답변을 하지는 않는다. 중간 중간 대답을 멈추는데 그 때 마다 "계속 말해"라고 하면 이어서 알려준다. 질문의 목적이 어디까지 알려주는지가 아니기 때문에 이정도에서 답변 받는것을 멈추었지만 상당히 자세하게 알려주고 문장 또한 어색하지 않다.

심지어 잘 알려주었다. 코드를 읽을줄만 안다면 이만한 사수(?)가 없다.

이제 질문을 넘어서 이렇게 기술 블로그 글도 인공지능으로 만들수 있는 세상이 왔다.