728x90
반응형
DOM 대신 Native Components
: 웹에서는 <div>, <span>, <p>, <img> 같은 HTML 태그를 사용하지만, React Native에서는 이에 상응하는 네이티브 컴포넌트를 사용합니다.
- <div> -> <View>: 가장 기본적인 컨테이너 컴포넌트. 레이아웃 구성에 사용.
- <p>, <span> -> <Text>: 텍스트를 표시하는 컴포넌트. React Native에서는 모든 텍스트는 반드시 <Text> 컴포넌트 내부에 있어야 합니다.
- <img> -> <Image>: 이미지를 표시하는 컴포넌트.
- <input> -> <TextInput>: 사용자 입력을 받는 컴포넌트.
- 스크롤 가능한 컨텐츠 -> <ScrollView> 또는 <FlatList>, <SectionList> (대량의 데이터 목록 표시에 최적화)
스타일링(Styling):
- CSS in JS: 스타일은 JavaScript 객체 형태로 작성합니다. 웹의 CSS와 문법이 유사하지만, 모든 CSS 속성이 지원되지는 않습니다. (예: float, display: grid 등)
- StyleSheet.create: 스타일 객체를 미리 생성하여 성능을 최적화합니다.
- Flexbox: 레이아웃은 주로 Flexbox를 사용합니다. React Native에서는 기본적으로 모든 <View> 컴포넌트가 display: flex와 유사하게 동작하며, flexDirection의 기본값은 column입니다 (웹은 row).
- 상속(Inheritance) 제한: 웹 CSS처럼 스타일 상속이 자유롭지 않습니다. 예를 들어, 부모 <View>에 설정된 color나 fontSize가 자식 <Text>에 자동으로 상속되지 않는 경우가 많습니다. (단, <Text> 컴포넌트 내부에 중첩된 <Text>는 스타일 상속 가능)
- 단위: 픽셀 밀도를 고려한 dp (Density-independent Pixels) 단위를 사용하지만, 코드에서는 숫자만 입력하면 React Native가 알아서 처리합니다. (예: fontSize: 16)
- 네비게이션(Navigation): 웹에서는 <a> 태그나 window.location을 사용하지만, React Native에서는 화면 전환을 위한 별도의 네비게이션 라이브러리(예: React Navigation)를 사용합니다.
- 개발 환경 및 빌드: 웹은 브라우저만 있으면 되지만, React Native는 iOS/Android 개발 환경(Xcode, Android Studio)이 필요할 수 있습니다. (단, Expo를 사용하면 이 부분이 매우 간소화됩니다.)
React Native 핵심 개념
- Props & State: React와 동일하게 작동합니다. 부모로부터 데이터를 전달받는 props와 컴포넌트 내부 상태를 관리하는 state. TypeScript를 사용하면 이 부분에서 타입 안정성을 확보할 수 있습니다.
- 컴포넌트 기반 아키텍처: UI를 독립적이고 재사용 가능한 컴포넌트들로 분리하여 개발합니다. (React와 동일)
- JSX (JavaScript XML): UI 구조를 XML과 유사한 형태로 작성합니다. (React와 동일)
- 플랫폼별 코드 작성:
- Platform.OS === 'ios' 또는 Platform.OS === 'android'와 같이 조건부 로직 사용.
- 파일 확장자를 이용한 분리: MyComponent.ios.tsx 와 MyComponent.android.tsx 파일을 만들면, React Native가 현재 플랫폼에 맞는 파일을 자동으로 로드합니다.
728x90
반응형