리액트 네이티브

오픈소스 프로젝트

사용자 인터페이스를 만드는 리액트에 기반을 두고 제작

ios/Android에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크

 

장점

- 코드 대부분이 플랫폼(ios/android)간 공유가능

- 패스트 리프레쉬로 변경된 코드를 저장하기만 해도 확인가능

 

단점

- 네이티브의 새로운 기능을 사용하는데 오래 걸림

- 유지보수 어려움

- 잦은 업데이트

 

리액트 네이티브 CLI를 이용하여 리액트 네이티브 프로젝트 생성

npx react-native init 프로젝트이름 --version x.xx.x

 

npx react-native init MyFirstCLI

cd MyFirstCLI

npm run android or npx react-native run-android

 

리액트 네이티브가 실행되면서 Metro가 실행된다.

Metro는 리액트 네이티브가 실행될 때마다 자바스크립트 파일들을 단일 파일로 컴파일 하는 역할을 한다.

 

npm run android 시 gradle 에러가 나는데 jdk16버전에서 jdk14버전으로 바꾸니 해결되었다.

따라서 정상적으로 실행되면 다음과 같다

 

 

 

 

 

MyFirstCLI 폴더에 src 폴더를 생성 후 App.js파일을 생성한다.

./src/App.js

import React from 'react'
import {View, StyleSheet, Text} from 'react-native';
const App = () => {
    return(
        <View style={styles.container}>
            <Text style={styles.title}>My First React Native</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backfroundColor: '#ffffff',
    },
    title: {
        fontsize: 30,
    },
});

export default App;

 

./App.js 를 다음과 같이 바꾼다.

import App from './src/App';

export default App;

./index.js

import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

 

첫 화면을 구성하는 파일만 변경하고 리액트 네이티브에서 사용되는 파일을 모두 src 폴더에서 관리하도록 한다.