What is React Native?
React.js와 React Native 차이점
Reat.js
- Javascript 라이브러리로 주로 웹 개발에 사용됨
- 사용자 Ui 구축에 특화
- 웹 환경에서 작동하기 위해 React DOM이라는 별도의 라이브러리 사용
- React 자체는 플랫폼 독립적이지만, React DOM은 React를 브라우저 환경에서 사용할 수 있도록 지원
React Native
- React DOM의 대안으로, IOS와 Android 환겨을 대상으로 함
- React Native는 React 와 동일한 상태 관리 및 컴포넌트 기반 접근 방식을 사용하지만, 모바일 플랫폼용 특화된 컴포넌트를 제공
- 제공되는 컴포넌트들은 ios 및 Andorid 네이티브 UI 요소로 컴파일 됨
- React Native는 카메라 접근, 알림 접근 같은 네이티브 API를 자바스크립트 코드에서 사용할 수 있도록 지원
React Native 작동방식
- React.js 코드 작성
- React Native에서도 Reat.js와 동일한 방식으로 코드 작성
- 차이점은 React Native에서 제공하는 특수한 컴포넌트를 사용함
- JSX 기반 컴포넌트 사용
- React Native는 버튼, 텍스트, 이미지와 같은 기본 UI 요소를 위한 내장 컴포넌트를 제공
- 이런 컴포넌트들은 iOS와 Android에 맞게 네이티브 UI로 컴파일됨
- 네이티브 플랫폼 API 사용
- React Native는 디바이스 카메라, GPS, 진동 등 네이티브 기능에 접근할 수 있는 API를 제공
- 이를 이용해 자바스크립트 코드로 디바이스의 네이티브 기능활용
왜 React Native로 개발하는가?
- 크로스 플랫폼 개발
- React.js의 장점 활용: 상태 관리와 컴포넌트 기반 구조
- 네이티브 수준의 성능: 자바스크립트로 개발된 앱이지만 네이티브 UI로 컴파일됨
React native 작동원리
import React from 'react';
import { View, Text } from 'react-native';
const App = () => {
return (
<View>
<Text>Hello, React Native!</Text>
</View>
);
};
export default App;
위 코드처럼 View와 Text는 React DOM의 HTML요소와 다른 RN에서 제공하는 컴포넌트다. 이러한 컴포넌트는 네이티브 UI요소로 변환된다.
자바스크립트 로직 처리
- RN은 UI 컴포넌트를 네이티브 요소로 변환
- js 로직(상태관리, 함수, 조건문 등)은 컴파일되지 않고 js로 실행됨
작동원리
- javascript스레드: RN은 네이티브 앱 내에서 js스레드를 생성해 js코드를 실행
- 브릿지: js 스레드는 RN의 브릿지를 통해 네이티브 플랫폼과 통신. 이 브릿지가 js와 네이티브 코드 간 데이터 교환을 처리
- ui와 로직 분리: ui요소는 컴파일되어 네이티브 ui로 변환되고 js로직은 브릿지를 통해 네이티브 플랫폼과 상호작용.
브릿지는 클라이언트-서버 통신과 비슷하며 JSON object 형태로 변환되어 전달된다. 이 부분에서 병목현상이 가장 많이 생기며 좋은 성능의 앱을 만들기 위해 브릿지를 건너는 횟수를 최소화해야한다.
RN 시작하기
개발환경 접근방식
- Expo CLI (권장)
- 간편한 워크플로우 제공: 프로젝트 생성, 네이티브 디바이스 기능 사용, 코드 작성 등이 더 쉬움.
- 무료 사용 가능: 일부 추가 유료 서비스도 제공되지만, 앱 개발 및 배포에 비용이 들지 않음.
- 유연성: Expo를 사용하다가 필요하면 언제든지 React Native CLI로 전환 가능.
추가 툴 제공: Expo가 제공하는 도구와 패키지로 개발이 더욱 편리.
- React Native CLI
- 기본 개발 환경: React Native 팀과 커뮤니티에서 제공하는 툴.
- 추가 설정 필요: 더 많은 설정 작업과 네이티브 디바이스 기능 통합 작업이 요구됨.
- 네이티브 코드와 통합: Java, Objective-C, Swift, Kotlin 등 네이티브 코드와의 통합이 더 용이.
결론: 초보자에게 Expo CLI 추천!
참고: EAS는 클라우드 환경에서 앱을 쉽게 빌드할 수 있도록 지원해주는 서비스
Expo 셋팅
참고: https://docs.expo.dev/get-started/create-a-project/
npx create-expo-app@latest --template blank [name]:--template blank옵션을 주어 최소로 필요로하는 dependency만 넣어주어 플젝 시작하기- 안드로이드는 핸드폰에 expo-go앱을 통해 QR을 스캔/ 아이폰은 앱 다운 후 기본 카메라로 스캔
npm expo start=> QR코드를 통해 안드로이드로 로컬 개발환경 확인가능
RN 베이직
스타일링
- RN CSS 지원안함, 자바스크립트 객체로 정의
Flex, Layout
- 모든 View는 기본적으로 FlexBox를 사용
- Flexbox는 자식 요소를 1차원 공간에 배치하는 데 사용.
- 기본으로Column 방향 , 웹은 row
- Main Axis, Cross Axis
flexDirection에 따라 결정
- 자식 요소 크기 제어
- flex는 자식 요소가 남는 공간을 어떻게 사용할지 결정
flex:1: 남는 공간의 동일한 비율 차지flex:2: 남는 공간의 두 배 차지flexShrink: 요소가 줄어들 수 있는 정도flexGrow: 요소가 확장될 수 있는 정도.
이벤트 처리
리액트와 비슷하게 처리한다.
state 처리도 리액트와 동일
export default function App() {
const [enteredGoalText, setEnteredGoalText] = useState('');
function goalInputHandler(enteredText) {
setEnteredGoalText(enteredText);
}
function addGoalHandler() {
console.log(enteredGoalText);
}
return (
<View style={styles.appContainer}>
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
onChangeText={goalInputHandler}
value={enteredGoalText}
placeholder="Your course goal!"
/>
<Button title="Add Goal" onPress={addGoalHandler} />
</View>
<View style={styles.goalsContainer}>
<Text>List of goals</Text>
</View>
</View>
);
}iOS와 Andorid 스타일링 차이
- Text 컴포넌트:
iOS에서는 Text 컴포넌트에 borderRadius를 적용 불가
해결 방법: Text를 View로 래핑한 뒤, 스타일을 View에 적용. - View를 활용해 스타일 호환성 확보해야 함.
- RN은 CSS처럼 자식요소로 스타일 상속되지 않음.
ScrollView & FlatLIst
- ScrollView는 모든 콘텐츠를 한 번에 렌더링하여, 많은 데이터를 처리할 경우 성능에 영향이 감.
- 대안: 데이터가 많을 경우
FlatList또는SectionList사용
FlatList
- 화면에 보이는 아이템만 렌더링(지연로딩)
- 긴 리스트에서도 성능 최적화
FlatList 최적화 옵션
initialNumToRender: 처음 렌더링할 아이템 개수 설정. 기본값 10.onEndReached: 리스트 끝에 도달했을 때 호출되는 함수. 페이지네이션 구현.onEndReachedThreshold: 끝에 도달하기 전 호출되는 비율 (기본값: 0.5).maxToRenderPerBatch: 한 번에 렌더링할 최대 아이템 개수.
Make things