[REACT NATIVE] 시작하기

React Native를 본격적으로 공부하기에 앞서, 이 기술을 사용하는 이유, 장단점, 개발환경세팅, 프로젝트 생성 방법 등에 대해 먼저 알아보고자 한다!!

React Native 란?

페이스북에서 만든 오픈소스 모바일 어플리케이션 프레임워크입니다.
안드로이드와 iOS 운영체제에서 모두 동작하는 프레임워크로, 네이티브 파트와 자바스크립트 파트로 구성되어있습니다.

장점

1) 크로스 플랫폼
RN은 크로스 플랫폼으로 iOS와 안드로이드에서 동시에 동작하는 애플리케이션을 개발할 수 있다.

2) 낮은 러닝커브
React와 유사하여 React를 활용한 웹 개발 경험이 있다면, 쉽게 접근이 가능하다.
그리고 mulator를 이용하여 에러 메시지 표시가 잘 되어있어 개발 경험이 매우 좋다.

3) 코드 재사용성과 유지보수성
RN은 비즈니스 로직, 스타일, 컴포넌트 구조 공유가 가능해 유지보수가 쉽다.
하나의 팀으로 여러 플랫폼 관리할 수 있어 팀 구조가 단순해진다.

단점

1) 성능 한계
JavaScript와 네이티브 간 브릿지를 통해 작동하므로, 복작합 애니메이션, 고성능 게임, 실시간 처리 앱 등에서는 순수 네이티브보다 성능이 떨어질 수 있다.

2) 네이티브 의존성 문제
네이티브 라이브러리와 의존성을 가지고 있다. 또한, 모든 기능을 자체적으로 지원하지 않기에
복잡한 기능이나 고유한 디바이스 API 사용 시 Android/iOS 네이티브 코드를 직접 작성해야 할 수 있다. 이로 인해 크로스 플랫폼의 이점이 줄고, 플랫폼별 개발 지식과 유지보수 부담이 생길 수 있다.

---

프로젝트 생성

참고참고 난 CLI로 헀다.

1. 터미널 열고 프로젝트 생성 명렁어 입력

npx @react-native-community/cli init 프로젝트 이름 작성

2. 타입스크립트 관련 패키지 추가 명령어

npm install --save-dev typescript @types/react @types/react-native

3. tsconfing.json 파일에 추가하기

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "react",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "allowJs": true,
    "noEmit": true,
    "isolatedModules": true
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

4. pod 설치 <- ios

cd ios
pod install
cd ..

5. 실행

npm run
npm run ios  <- ios 바로 실행된다.

---

참고
도서 | Do it! 리액트 네이티브 앱프로그래밍
https://reactnative.dev/