[RN] React Native란?

1. React Native란?

이름에서 볼 수 있듯이 React와 관련이 있지만, React Native는 React와는 별개인 라이브러리이다.

React는 인터페이스를 구축하기 위한 JavaScript 라이브러리로 주로 웹 개발에 사용된다. 

React Native 또한 JavaScript 라이브러리지만, 플랫폼 대상이 웹 브라우저가 아닌 iOS와 Android이기 때문에 모바일 앱을 구축할 수 있다.

 

 

2. React Native 원리

const App = (props) => {
  return (
    <View>
      <Text>Hello!</Text>
    </View>
  );
};

위 코드는 React를 사용해봤다면 익숙할 JSX코드이지만, React와는 다른 점이 있다.

바로 return 문에 있는 <View>와 <Text> 요소들!

이 요소들은 React Native가 각 플랫폼의 네이티브 UI요소로 컴파일이 된다.

간단히 말하면 React Native는 JavaScript 코드를 실행하지 않고, JavaScript 코드를 각 플랫폼의 네이티브 UI 코드로 변환해서 실행된다.

 

예를 들어 사용자가 텍스트를 입력할 수 있는 요소는 웹앱을 구축할 때 react-dom을 이용해서 HTML요소 중 input을 사용하면 되지만, Android 앱을 구축한다면? Android에 내장된 EditText 요소로, iOS의 경우는 UITextField 요소를 사용해야한다.

그래서 React Native에서는 내장된 <TextInput> 컴포넌트를 통해 EditText나 UITextField로 컴파일 한다.

 

그런데 JSX가 아닌 다양한 함수들과 상태 관리 등을 하는 JavaScript 코드들은 어떻게 처리될까?

RN의 컴포넌트인 UI 요소는 컴파일이 되지만, 자바스크립트에서 작성한 로직은 컴파일 되지 않고 RN이 호스팅하는 자바스크립트 스레드에서 실행된다. 이 스레드는 네이티브 코드와는 별개로 동작하며 비즈니스 로직, 상태 관리, 이벤트 처리 등을 담당한다.

 

 

3. Expo CLI vs React Native CLI

프로젝트를 생성하기 앞서 아래 공식 문서 중 개발환경 설정을 확인하면

https://reactnative.dev/docs/environment-setup?guide=quickstart

 

Expo Go Quickstart가 있고, React Native CLI Quickstart가 있다.

이 둘의 차이점은 몇가지 있는데

 

1. 간편성

Expo는 초기 설정 및 빌드 프로세스를 매우 간편하게 만들어주는 툴로 Expo를 사용하면 별도의 네이티브 코드를 작성하지 않아도 Expo SDK에 내장된 많은 기능들을 사용할 수 있다. 이로 인해 일부 특정 네이티브 기능을 사용하는 경우 제약이 생길 수 있다.

React Native CLI는 Expo에 비해 설정이 더 복잡할 수 있지만, 네이티브 코드에 더 많은 제어권을 제공한다.

 

2. 네이티브 모듈 사용

Expo는 자체 SDK에 내장된 API들을 사용하도록 제한되어있어 특정 네이티브 모듈을 사용하려면 해당 모듈이 Expo SDK에 포함되어있어야 한다. 하지만 React Native CLI를 사용하면 더 많은 네이티브 모듈을 직접 사용할 수 있ㄷ.

 

3. 배포

Expo앱은 Expo 클라우드 서비스를 통해 쉽게 빌드하고 배포할 수 있지만,

React Native CLI를 사용하면 앱을 직접 빌드하거나, Firebase같은 서드파티를 사용해서 빌드 및 배포해야한다.

 

이런 이유들로 프로젝트의 요구 사항과 선호에 따라 프로젝트를 세팅하면 되지만,

나처럼 네이티브를 처음 시작하는 사람에겐 Expo CLI를 사용하는것이 적합하다고 생각했다.

또한, 처음에 Expo로 시작을 했더라도 React Native CLI 워크플로우로 전환이 가능하다.

 

 

4. React Native 프로젝트 생성하기

npx create-expo-app 폴더명
cd 폴더명

 

Expo CLI 툴을 사용하기로 했으니 프로젝트를 생성하기 위해서 위 명령어를 입력해주기 (Node.js가 설치 되어있다고 가정)

설치가 다 됐으면 Expo 개발 서버를 시작하기 위해 실행할 수 있는 3가지 명령어가 보이는데 각 플랫폼에 맞는 개발 서버를 시작하면 될 것 같다.

 

 

생성된 파일구조를 보자면, assets 폴더는 앱의 아이콘이나 이미지를 저장하는 곳

node_modules는 내부적으로 사용되는 서드파티 패키지들이 들어가있다.

package.json은 프로젝트의 의존성이 나와있는데 거기에 expo도 확인할 수있다.

bacel.config.js는 코드가 내부적으로 어떻게 변환되는지 설정하는데 따로 설정할 건 없다.

app.json 파일은 React Native앱의 설정과 실행 방식을 구성할 수 있다.

마지막으로 App.js가 앱의 시작점이며 앱의 구조를 정의하는 역할을 한다.

 

글이 길어져서 다음은 실행환경에 대해서 작성해보려고 한다.