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;이렇게 원형 진행률 상태 위젯을 추가하면, 앱이 시작할 때 잠시 기다리는 것을 시각적으로 표현할 수 있습니다. 이 외에도 스플래시 스크린을 커스터마이징하는 방법은 여러 가지가 있으니, 상황에 맞게 추가적으로 커스터마이징 할 수 있습니다
한 번에 이렇게 까지 장황하게 답변을 하지는 않는다. 중간 중간 대답을 멈추는데 그 때 마다 "계속 말해"라고 하면 이어서 알려준다. 질문의 목적이 어디까지 알려주는지가 아니기 때문에 이정도에서 답변 받는것을 멈추었지만 상당히 자세하게 알려주고 문장 또한 어색하지 않다.
심지어 잘 알려주었다. 코드를 읽을줄만 안다면 이만한 사수(?)가 없다.
이제 질문을 넘어서 이렇게 기술 블로그 글도 인공지능으로 만들수 있는 세상이 왔다.
