들어가며: React Native 핵심 개념 이해하기

React 경험이 있는 웹 프론트엔드 개발자가 React Native로 모바일 앱 개발을 시작할 때 알아야 할 모든 컴포넌트와 API를 체계적으로 정리했습니다. 웹 개발과의 차이점을 중심으로 각 개념의 실제 사용 시나리오를 포함하여 설명합니다.

웹 vs 모바일 개발 패러다임 전환

React Native에서는 HTML 요소 대신 네이티브 컴포넌트를 사용하며, CSS 대신 JavaScript 기반 스타일링을 적용합니다. DOM이 아닌 네이티브 뷰 계층구조를 다루며, 브라우저 API 대신 모바일 플랫폼 API를 활용합니다.

Part 1: Components - UI 구성 요소

1. Core Components (핵심 컴포넌트)

View - 컨테이너의 기본

• 웹의 div와 유사: 다른 컴포넌트를 감싸는 가장 기본적인 컨테이너
• 주요 차이점:
  • 시맨틱 태그 없음 (header, nav, section 등 구분 없음)
  • 모든 레이아웃은 Flexbox 기반 (Grid 미지원)
  • 터치 이벤트 내장 (onPress 등)
• 주요 props:
  • style: 스타일 객체 (camelCase 속성명)
  • accessible: 접근성 설정
  • testID: 테스트용 식별자
• 사용 시나리오: 레이아웃 구성, 컴포넌트 그룹핑, 터치 영역 정의

Text - 텍스트 표시

• 웹의 p, span과 유사: 모든 텍스트는 반드시 Text 컴포넌트 내부에
• 주요 차이점:
  • View 아래 직접 텍스트 불가 (반드시 Text로 감싸야 함)
  • 스타일 상속은 Text 하위에서만 작동
  • 기본 폰트 설정 필수
• 주요 props:
  • numberOfLines: 텍스트 줄 수 제한
  • ellipsizeMode: 말줄임 방식 ('head', 'middle', 'tail')
  • selectable: 텍스트 선택 가능 여부
  • onPress: 텍스트 클릭 이벤트
• 사용 시나리오: 제목, 본문, 라벨, 링크 텍스트 표시

Image - 이미지 표시

• 웹의 img와 유사: 로컬 및 네트워크 이미지 표시
• 주요 차이점:
  • 네트워크 이미지는 반드시 크기 지정 필요
  • 자동 크기 조정 없음
  • 내장 캐싱 메커니즘