React Native 1. 개념 및 시작하기

Ch 01. React Native 소개

1. React Native 소개

React Native의 장점

1. 하나의 코드로 iOS & Android 동시 개발 → (코드 재사용성 UP)
   • 리액트(React) 기반이어서 기존 웹 개발자도 쉽게 적응 가능 (러닝 커브 낮음)
2. 코드 푸시(CodePush)로 빠른 업데이트 가능 → (앱 스토어 심사 없이 즉시 배포)
   • 운영 비용 절감 & 빠른 핫픽스 적용
3. Fast Refresh (빠른 개발 환경)
   • 코드 변경 시 바로 반영됨 (완전 새로고침 X)
4. 오픈소스 플랫폼
   • 무료 사용 가능, 다양한 라이브러리 활용 가능

React Native의 단점

1. 일부 기능(예: 인앱 결제, 블루투스 등)은 네이티브 코드 필요
   • iOS/Android 각각 네이티브 코드 작성해야 함
2. 오픈소스 라이브러리 의존도가 높음
   • 라이브러리 업데이트 시 호환성 문제 발생 가능
3. 네이티브 앱보다 성능이 다소 떨어짐
   • 게임이나 고성능 앱 개발에는 부적합
4. 업데이트가 잦아 유지보수 부담
   • Expo, React Native 버전업 시 종속 라이브러리 호환성 문제 발생

2. Expo CLI vs React Native CLI 비교

	Expo CLI	React Native CLI (Native CLI)
설명	빠르게 앱을 실행 & 배포 가능	네이티브 기능 개발 가능
장점	- 환경 설정 없이 바로 개발 가능 - Expo Go 앱에서 즉시 테스트 가능	- 네이티브 모듈 추가 가능 - 인앱 결제, 블루투스 등 네이티브 기능 지원
단점	- 네이티브 코드 수정 불가 - 일부 기능(인앱 결제 등) 구현 불가	- 초기 설정 복잡 - 빌드 시간이 상대적으로 길다
사용 추천	빠른 MVP 개발, 간단한 앱	커스텀 네이티브 기능이 필요한 앱

Expo CLI로 시작 → 필요하면 명령어 한줄로 React Native CLI로 마이그레이션 가능!

npx expo prebuild  # Expo 프로젝트를 Native CLI로 변환

Ch 02. Expo 세팅

1. Expo 사용 전 필요한 환경 세팅

1. 앱 스토어에서 Expo Go 설치 (실제 기기에서 실행 가능)
2. Node.js 설치 (https://nodejs.org/)
3. Git 설치 (https://git-scm.com/)
4. Watchman 설치 (Mac 사용 시)
5. brew install watchman
6. 패키지 매니저 선택 → yarn 또는 npm
7. 에디터 추천 → VS Code

2. Expo 프로젝트 생성 & 실행

npx create-expo-app myApp  # Expo 프로젝트 생성
cd myApp
npx expo start             # Expo 앱 실행 (로컬 서버 열림)

안드로이드는 expo go앱켜서 스캔하고

아이폰은 그냥 카메라앱 켜서 스캔하면 됨

기본 RN 화면이 나온다!! index.tsx수정해봄 ㅎ

Ch 03. React Native 학습 시 주요 개념

1. Core Components

Android와 iOS의 UI 컴포넌트 구조 차이가 있지만

React Native는 같은 JSX 코드를 사용해도 Android와 iOS에서 각각 네이티브 UI 컴포넌트로 변환됨.

• Android에서는 내부적으로 ViewGroup > ImageView + TextView 로 변환.
• iOS에서는 내부적으로 UIView > UIImageView + UITextView 로 변환.

한 번의 코드 작성으로 Android & iOS 모두 대응 가능!

React Native의 코어 컴포넌트(Core Components)란?

React Native에서 기본적으로 제공되는 UI 요소를 의미한다.
React에서

, , 같은 웹 요소를 사용하듯이,
React Native에서는 모바일 앱에 맞는 네이티브 컴포넌트를 제공한다.

주요 코어 컴포넌트 정리

컴포넌트	설명	비고
View	div와 비슷한 컨테이너 역할	레이아웃 잡을 때 필수
Text	텍스트를 렌더링하는 컴포넌트	div 안에처럼 써야 함
Image	이미지를 표시하는 컴포넌트	source={{ uri: "url" }} 형태
ScrollView	스크롤 가능한 화면	flex: 1 설정 자주 필요
FlatList	성능 최적화된 리스트 렌더링	대량 데이터 표시 시 사용
TouchableOpacity	터치 가능한 버튼 역할	터치 시 투명도 조절 효과
TextInput	사용자가 입력할 수 있는 필드	onChangeText로 값 업데이트
Button	기본 버튼 제공	커스터마이징 어려움
SafeAreaView	노치 있는 디바이스에서 안전한 영역	iPhoneX 이후 필수

button은 다르게 만들어서 쓴다.

추후 설명..

2. 컴포넌트와 prop

1. 컴포넌트(Component)란?

재사용 가능한 개별적인 UI 조각

• React Native에서 UI를 구성하는 기본 단위
• 여러 개의 컴포넌트를 조합하여 화면을 구성
• 유지보수와 재사용성을 높일 수 있음

2. Prop(속성)이란?

부모 → 자식 컴포넌트로 데이터를 전달하는 방법

• 부모 컴포넌트에서 자식 컴포넌트로 값을 내려주는 역할
• 자식 컴포넌트에서는 부모로부터 받은 prop을 직접 수정할 수 없음(불변성)

props.name은 부모에서 넘겨준 값이라 자식에서 변경 불가!
만약 변경하고 싶다면 부모에서 상태(state)로 관리해야 함

3. 컴포넌트의 종류

1) 클래스형 컴포넌트 (Class Component)

• 예전 방식, 현재는 거의 사용 안 함
• state와 생명주기 메서드(componentDidMount 등)을 가짐
• React Native에서 React.Component를 상속받아 사용
• class 키워드 필요
• render() 메서드 반드시 필요
• 함수형보다 메모리 자원을 더 사용한다

import React, { Component } from "react";
import { Text, View } from "react-native";

class MyClassComponent extends Component {
  render() {
    return (
      <View>
        <Text>Hello, {this.props.name}!</Text>
      </View>
    );
  }
}

2) 함수형 컴포넌트 (Function Component)

• 현재 React Native에서 주로 사용되는 방식!
• state, lifeCycle관련 기능 사용 불가능 useState, useEffect 같은 훅(Hook)과 함께 사용 가능

const MyFunctionComponent = ({ name }) => {
  return (
    <View>
      <Text>Hello, {name}!</Text>
    </View>
  );
};

📌 현재는 함수형 컴포넌트 + 훅(Hooks) 조합이 표준!

3. 컴포넌트와 prop : 실습

4. React Hooks (1) useState 이론&실습

5. React Hooks (2) useEffect 이론_실습

6. React Hooks (3) custom 이론_실습