React Native 도전기

React Native

React 기반으로 만들어진 프레임 워크이며, 크로스 플랫폼 앱 개발을 가능하게 한다.

• 크로스 플랫폼 앱이란?
  • 하나의 소스 코드로 AOS,IOS에서 똑같이 작동하는 앱을 의미, 네이티브 앱과는 대조되는 개념
  • 대표적으로 React Native와 Flutter가 있다.

• 네이티브 앱이란?
  • 각 운영 체제(AOS,IOS)에 맞춰 따로 개발 및 운영이 필요

React Native 개발 준비

• Expo CLI 설치
  • React Native 앱을 가장 간단하게 시작하려면 Expo를 쓰는 것이 좋다.

  npm install --global expo-cli

• 새 프로젝트 생성
  • Expo를 활용해 프로젝트 생성

  npx create-expo-app .
  //현재 위치에 프로젝트 생성 react, next와 동일하게
  // 프로젝트 명을 넣고 싶으면 . 자리에 이름 넣기

• 기본 구조

root/
├── App.js       # 메인 컴포넌트 (앱 시작점)
├── package.json # 의존성 관리 파일
├── node_modules # 설치된 라이브러리

• CSS 기초
  • React Native는 CSS를 직접 사용할 수 없고, StyleSheet를 사용

  import { StyleSheet, Text, View } from "react-native";
  
  export default function App() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>React Native 시작하기 🚀</Text>
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "#f0f0f0",
    },
    title: {
      fontSize: 20,
      fontWeight: "bold",
    },
  });

  • Nativewind를 통해서 tailwind와 유사한 방식으로 사용 가능하다. (나는 tailwind가 익숙하기 때문에 Nativewind를 사용할 것 같다)