React Native 1단계: 시작하기

[1단계] React Native 시작하기

1. React Native란? (웹 리액트와의 차이)

• 리액트 네이티브는 웹이 아니라 모바일 앱을 만드는 리액트다.

• 핵심 개념은 동일하지만, HTML/CSS 대신 네이티브 컴포넌트를 사용한다.

  • <div> → <View>
  • <p> or <span> → <Text>
  • <img> → <Image>

• 브라우저 대신 Android/iOS 장치에서 실행된다.

2. Expo vs React Native CLI

→ 처음에는 Expo로 시작하는 게 훨씬 빠르고 편하다.

3. 개발 환경 구축 (Expo 기반)

설치:

npm install -g expo-cli

새 프로젝트 생성:

npx create-expo-app MyApp
cd MyApp
npm start

• QR코드를 스마트폰에서 Expo Go 앱으로 스캔하면 바로 실행됨
• 안드로이드/iOS 에뮬레이터 없이도 개발 가능

4. 첫 화면 만들기

기본 구조:

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

export default function App() {
  return (
    `<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>`
      `<Text>`Hello React Native!`</Text>`
    `</View>`
  );
}

• 모든 컴포넌트는 반드시 View 안에 있어야 하고, style은 JS 객체 형태로 지정

5. 주요 기본 컴포넌트

6. Flexbox로 레이아웃 잡기

• 웹과 거의 동일하지만 단위가 없음 (px 사용 안 함)

`<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>`
  `<View style={{ width: 50, height: 50, backgroundColor: 'red' }} />`
  `<View style={{ width: 50, height: 50, backgroundColor: 'blue' }} />`
`</View>`

• flexDirection, justifyContent, alignItems 모두 동일하게 사용 가능

요약

• React Native는 리액트를 기반으로 한 모바일 앱 프레임워크
• HTML/CSS 대신 네이티브 전용 컴포넌트를 사용 (View, Text, StyleSheet)
• Expo로 시작하면 빠르게 결과 확인 가능
• 스타일은 JS 객체로 작성하고, Flexbox는 웹과 유사함

심화학습

Q1. 웹에서는 HTML과 CSS를 따로 쓰지만, React Native는 왜 스타일을 JS 객체로 쓰는 걸까?
A1. 모바일 환경에서는 DOM이 없기 때문에 HTML/CSS 방식이 안 통한다. 대신 네이티브 코드로 직접 렌더링되기 때문에, 스타일도 JS로 제어하도록 통합되어 있음. 이는 플랫폼간 호환성과 성능에도 유리하다.

Q2. React Native에서 View 안에 Text만 쓰지 않으면 오류가 나는 이유는?
A2. Text는 반드시 Text 안에만 들어갈 수 있다. View 안에 텍스트를 직접 쓰면 네이티브 렌더링 엔진이 이해하지 못해 에러가 발생한다. 반드시 <Text>내용</Text> 형태여야 한다.

Q3. Expo를 쓰면 네이티브 기능 제한이 있다고 했는데, 예를 들어 어떤 게 안 되나요?
A3. 예를 들어 Bluetooth, 배터리 상태 접근, 백그라운드 작업 같은 기능은 Expo 기본 설정에선 어렵다. 이런 기능이 필요하면 Eject해서 React Native CLI 기반으로 전환해야 한다.