React Native

무엇인가

React Native는 Meta가 만든 오픈소스 프레임워크로, React와 JavaScript(또는 TypeScript)를 사용해 네이티브 모바일 앱을 만든다. 웹에서 하던 것과 같은 방식으로 컴포넌트를 작성하지만, 웹 뷰가 아니라 실제 네이티브 iOS 및 Android UI 위젯으로 렌더링된다. 코드의 상당 부분이 두 플랫폼에서 공유되며, 필요할 때는 여전히 플랫폼별 네이티브 코드로 내려갈 수 있다.

강점

• 하나의 코드베이스, 두 플랫폼 — iOS와 Android 사이에서 대부분의 로직과 UI를 공유한다.
• React를 사용하므로 웹 개발자가 빠르게 생산적이 되고 생태계가 거대하다.
• 웹 뷰가 아닌 진짜 네이티브 컴포넌트를 렌더링해 진정한 네이티브 느낌을 준다.
• Fast Refresh로 편집 중 거의 즉각적인 피드백을 받는다.
• 탈출구: 한계에 부딪히면 Swift/Kotlin으로 네이티브 모듈을 작성한다.

트레이드오프

• JavaScript와 네이티브 사이의 브리지는 성능이 중요하거나 애니메이션이 많은 작업을 복잡하게 만들 수 있다.
• 네이티브 의존성과 빌드 도구는 깨지기 쉽고 버전에 민감할 수 있다.
• 어려운 부분에서는 여전히 플랫폼 지식(그리고 iOS 빌드를 위한 Mac)이 필요하다.
• 일부 최신 OS 기능은 커뮤니티나 당신이 감쌀 때까지 지연된다.

언제 사용하는가

하나의 팀과 하나의 코드베이스로 iOS와 Android 양쪽에 네이티브 앱을 출시하고 싶을 때, 특히 팀이 이미 React를 알고 있다면 React Native를 선택하라. 콘텐츠, 커머스, CRUD 형태의 앱에 잘 맞는다.

바이브 코딩 적합성

React Native는 결국 React이기 때문에 AI 지원 코딩에 친화적이다 — 어시스턴트는 컴포넌트, 훅, props에 깊이 능통하다. 모델에게 TypeScript를 사용하고, 가능한 한 컴포넌트를 작고 상태 없이 유지하며, 손쉬운 빌드와 네이티브 모듈을 위해 Expo와 짝짓도록 요청하라. 생성된 코드가 올바른 라이브러리를 선택하도록 타깃 플랫폼과 필요한 네이티브 기능을 미리 명시하라.

import { Text, Button, View } from "react-native";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Add" onPress={() => setCount(count + 1)} />
    </View>
  );
}