리엑트 네이티브 기본 프로젝트 구조 및 문법 설명 React Native

리엑트 네이티브 기본 프로젝트 구조 및 문법 설명 React Native

리엑트 네이티브 기본 프로젝트 구조 및 문법 설명 React Native

1. 프로젝트 폴더 구조

my-project/
├── App.tsx           # 애플리케이션의 진입점
├── assets/           # 이미지, 폰트 등 정적 리소스 폴더
├── node_modules/     # 설치된 npm 패키지
├── package.json      # 프로젝트 의존성과 스크립트 설정 파일
├── tsconfig.json     # TypeScript 설정 파일
├── app.json          # Expo 프로젝트 설정 파일
└── babel.config.js   # Babel 설정 파일 (코드 변환기)

2. 주요 파일 설명

2.1. App.tsx

• 앱의 진입점으로, 첫 화면을 구성하는 곳입니다.
• 여기에서 컴포넌트와 화면을 렌더링하며 필요한 로직을 추가합니다.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Welcome to React Native!</Text>
    </View>
  );
}

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

2.2. assets/

• 이미지, 폰트, 아이콘 등 정적 파일을 저장하는 폴더입니다.
• 예: assets/logo.png 같은 리소스를 저장하고 앱에서 불러옵니다.

2.3. package.json

• 프로젝트의 메타데이터, 의존성, 스크립트를 정의하는 파일입니다.

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "build": "expo build",
    "eject": "expo eject"
  },
  "dependencies": {
    "react": "18.0.0",
    "react-native": "0.72.0",
    "expo": "~49.0.0"
  }
}

2.4. tsconfig.json

• TypeScript 설정 파일로, 컴파일러 옵션을 정의합니다.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "react-native",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

2.5. app.json

• Expo 설정 파일로, 앱 이름, 아이콘, 배포 설정 등을 정의합니다.

{
  "expo": {
    "name": "My Project",
    "slug": "my-project",
    "version": "1.0.0",
    "platforms": ["ios", "android"],
    "icon": "./assets/icon.png"
  }
}

3. 리액트 네이티브 코드의 기본 구조

3.1. React Native Core Components

React Native는 HTML 대신 자체 UI 컴포넌트를 사용합니다:

• View: 레이아웃 컨테이너 (HTML의 div와 비슷)
• Text: 텍스트 표시 (HTML의 p 또는 span)
• Image: 이미지 표시 (HTML의 img)
• ScrollView: 스크롤 가능한 뷰
• Button: 기본 버튼

3.2. 코드 예제

import React from 'react';
import { StyleSheet, Text, View, Image, Button, Alert } from 'react-native';

export default function App() {
  const onPressButton = () => {
    Alert.alert("Button clicked!");
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
      <Image source={{ uri: 'https://via.placeholder.com/150' }} style={styles.image} />
      <Button title="Click Me" onPress={onPressButton} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  image: {
    width: 150,
    height: 150,
    marginBottom: 20,
  },
});

4. 스타일링

React Native에서는 CSS 대신 StyleSheet를 사용하여 스타일을 정의합니다.

• Flexbox를 사용하여 레이아웃을 구성합니다.
• 색상, 폰트 크기 등은 React Native의 스타일 속성을 따릅니다.

const styles = StyleSheet.create({
  container: {
    flex: 1, // 화면을 꽉 채움
    justifyContent: 'center', // 세로 정렬
    alignItems: 'center', // 가로 정렬
    backgroundColor: '#fff', // 배경색
  },
  text: {
    fontSize: 16, // 글자 크기
    color: '#333', // 글자 색
  },
});

5. 컴포넌트 구조화

작업이 커지면 코드를 컴포넌트로 분리하여 관리합니다

my-project/
├── components/
│   ├── Header.tsx    # 헤더 컴포넌트
│   └── Footer.tsx    # 푸터 컴포넌트
├── screens/
│   ├── HomeScreen.tsx # 홈 화면
│   └── AboutScreen.tsx # 소개 화면

6. Expo 기본 명령어

• 앱 실행

npm start

• 빌드 준비(Android/iOS):

expo build:android
expo build:ios