React Native 소개

React Native는 Facebook에서 공개한 오픈소스 프레임워크로, "한 번 배우면 어디서든 사용한다(Learn once, write anywhere)"는 철학을 바탕에 두고 있습니다. JavaScript와 React를 활용해 iOS와 Android용 네이티브 애플리케이션을 개발할 수 있습니다.

관련 저장소 및 문서:

• GitHub: https://github.com/facebook/react-native
• 한국어 문서: http://reactnative.cn/

Tom Occhino가 발표한 React Native: Bringing modern web techniques to mobile에서 프레임워크 설계 철학을 설명합니다. 웹 기술의 발전에도 불구하고 네이티브 개발이 여전히 필요한 이유는 다음과 같습니다:

• 시스템 기본 컨트롤의 우수한 사용자 경험
• 정교한 제스처 인식 처리
• 이미지 디코딩, 텍스트 렌더링 등에 적합한 멀티스레드 아키텍처
• 세밀한 애니메이션 구현 가능

개발 환경 준비

본 가이드는 macOS와 iOS 개발을 기준으로 작성되었습니다.

1. Homebrew 설치

Node.js 등 필요한 도구를 설치하기 위해 패키지 관리자를 먼저 설정합니다.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. Node.js 설치

Homebrew를 통해 Node 런타임을 설치합니다.

brew install node

3. React Native CLI 도구

전역 환경에서 프로젝트 생성 및 실행 명령을 사용할 수 있도록 합니다.

npm install -g react-native-cli

중요: npm 기본 레지스트리 접속이 느린 경우, https://registry.npm.taobao.org 또는 https://registry.npmmirror.com 등의 미러 서버를 설정하세요.

영구 설정 방법:

# ~/.npmrc 파일에 아래 내용 추가
registry = https://registry.npmmirror.com

4. Watchman 설치

Facebook에서 개발한 파일 시스템 감시 도구로, 핫 리로딩 성능 향상에 도움을 줍니다.

brew install watchman

5. Flow 설치 (선택)

정적 타입 검사를 적용하려면 Flow를 설치합니다.

brew install flow

첫 프로젝트 생성 및 실행

터미널에서 순서대로 명령을 실행하여 샘플 앱을 만들고 시뮬레이터에서 확인합니다.

# 새 프로젝트 생성 (상세 로그 출력)
react-native init SampleApp --verbose

# 프로젝트 디렉터리로 이동
cd SampleApp

# iOS 시뮬레이터에서 실행
react-native run-ios

정상적으로 실행되면 iOS 시뮬레이터에 기본 화면이 표시됩니다.

일반적인 문제 해결

개발 서버 연결 오류

could not connect to development server 메시지가 나타나면, iOS 프로젝트의 Info.plist 파일에 다음 설정을 추가합니다:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

핫 리로딩 동작 안 함

⌘+R 단축키로 화면이 갱신되지 않으면, 시뮬레이터에서 Ctrl+⌘+Z를 누르거나 메뉴 Hardware → Shake Gesture를 선택한 뒤 Reload를 탭합니다.

참고 자료

• 공식 문서: https://reactnative.dev/docs/getting-started
• npm 미러 가이드: https://cnodejs.org/topic/4f9904f9407edba21468f31e