ReactNative 분류
[리액트 네이티브 튜토리얼] 리액트 네이티브로 10초만에 손쉽게 앱 만들기
작성자 정보
- CodeCraftsman 작성
- 작성일
본문
안녕하세요!
리액트 네이티브를 활용하여 간단한 모바일 앱을 만들어보겠습니다.
이 튜토리얼에서는 앱을 생성하고, 화면에 텍스트를 출력하는 기본적인 예제를 다룰 것입니다.
1. 프로젝트 시작하기
먼저, 터미널을 열고 다음 명령어를 실행하여 리액트 네이티브 프로젝트를 초기화합니다.
npx react-native init MyFirstApp
프로젝트가 생성되면 해당 디렉토리로 이동합니다.
cd MyFirstApp
2. 앱 실행
다음으로, 프로젝트 폴더에서 다음 명령어로 앱을 실행합니다.
npx react-native run-android
# 또는
npx react-native run-ios
위 명령어 중 플랫폼에 맞게 선택하여 실행합니다.
이때 안드로이드 스튜디오나 Xcode가 설치돼 있어야 합니다.
3. 앱 코드 작성
프로젝트 폴더에서 App.js 파일을 열어 다음과 같이 코드를 수정합니다.
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>안녕하세요, 리액트 네이티브 앱!</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 20,
fontWeight: 'bold',
},
});
export default App;
4. 앱 실행 및 결과 확인
코드 수정이 끝났다면,
앱을 다시 실행하여 변경된 내용을 확인합니다.
npx react-native run-android
# 또는
npx react-native run-ios
5. 결과 확인
화면에 "안녕하세요, 리액트 네이티브 앱!"이라는 글자가 나타나면 성공입니다.
이제 여러분은 리액트 네이티브를 사용하여 간단한 모바일 앱을 만들어보았습니다.
앱 개발에 대한 더 많은 기능과 개념을 추가로 학습하면서 더욱 멋진 앱을 만들어보세요!
관련자료
댓글 0
등록된 댓글이 없습니다.