Expo를 이용한 React Native App 만들기

랩탑에 개발환경 세팅

npx를 사용하여 새로운 Expo프로젝트 생성합니다.

npx create-expo-app@latest MyApp
cd MyApp
npx expo start

혹시 npx expo start에서 오류가 난다면, 오래된 랩탑의 경우 필요에 따라서 NPM을 새로 설치해야할 수도 있어요.

# NPM새로 다운
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# NPM 20설치
nvm install 20

# NPM 20 사용
nvm use 20

# bash에 아래의 변수를 넣는다
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

위의 명령어를 실행하여 NPM을 업그레이드 한 뒤 npx expo start --clear를 실행하면 오류없이 Expo가 실행되고 QR코드가 보일거에요.

폰에 개발환경 세팅

폰에 Expo Go앱을 설치합니다. 그리고 로그인을 하세요. 폰카메라에 QR코드를 보여주면 Expo Go가 MyApp을 인식해서 화면에 보여줄거에요. 중간에 Local Network써도 되는지 물어보면 허용해주시면 됩니다.

코드 수정해보기

랩탑으로 돌아와서 코드를 넣으면 폰에서 실행이 되는지 확인해보도록 할게요. 프로젝트 루트폴더에 보시면 app/(tabs)/index.tsx라는 파일이 있을거에요. 그걸 열고 아래 파일로 바꿔주세요.

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

export default function Index() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

그러면 Expo Go의 해당 앱 화면에 Hello World!가 뜰거에요