Skip to main content

플랫폼별 코드 작성

크로스 플랫폼 앱을 개발할 때는 가능한 한 많은 코드를 재사용하는 것이 좋다. 하지만 특정 상황에서는 플랫폼에 따라 코드를 다르게 작성하는 것이 더 적절할 수 있다. 예를 들어, 안드로이드와 iOS에 대해 각각 별도의 시각적 컴포넌트를 구현해야 할 수 있다.

React Native는 플랫폼별로 코드를 분리하고 구성할 수 있는 두 가지 방법을 제공한다:

일부 컴포넌트는 특정 플랫폼에서만 작동하는 속성을 가질 수 있다. 이러한 속성들은 @platform으로 주석 처리되며, 웹사이트에서는 작은 배지로 표시된다.

플랫폼 모듈​

React Native는 앱이 실행 중인 플랫폼을 감지하는 모듈을 제공한다. 이 감지 로직을 사용해 플랫폼별 코드를 구현할 수 있다. 컴포넌트의 일부만 플랫폼별로 다를 때 이 옵션을 활용한다.

tsx
import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100,
});

Platform.OS는 iOS에서 실행 중일 때 ios가 되고, Android에서 실행 중일 때 android가 된다.

또한 Platform.select 메서드를 사용할 수 있다. 이 메서드는 'ios' | 'android' | 'native' | 'default' 중 하나를 키로 가지는 객체를 인자로 받아, 현재 실행 중인 플랫폼에 가장 적합한 값을 반환한다. 즉, 휴대폰에서 실행 중이라면 ios와 android 키가 우선순위를 가진다. 이 키들이 지정되지 않았다면 native 키가 사용되고, 그 다음으로 default 키가 사용된다.

tsx
import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'green',
      },
      default: {
        // 다른 플랫폼, 예를 들어 웹
        backgroundColor: 'blue',
      },
    }),
  },
});

이 코드는 모든 플랫폼에서 flex: 1을 가지는 컨테이너를 생성한다. iOS에서는 빨간 배경색, Android에서는 초록 배경색, 다른 플랫폼에서는 파란 배경색을 적용한다.

Platform.select는 any 타입의 값을 받기 때문에, 플랫폼별 컴포넌트를 반환하는 데에도 사용할 수 있다. 예를 들어 다음과 같이 작성한다:

tsx
const Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();

<Component />;
tsx
const Component = Platform.select({
  native: () => require('ComponentForNative'),
  default: () => require('ComponentForWeb'),
})();

<Component />;

안드로이드 버전 확인하기
Android
​

안드로이드에서는 Platform 모듈을 사용해 앱이 실행 중인 안드로이드 플랫폼의 버전을 확인할 수 있다:

tsx
import {Platform} from 'react-native';

if (Platform.Version === 25) {
  console.log('Running on Nougat!');
}

참고: Version은 안드로이드 OS 버전이 아닌 안드로이드 API 버전을 나타낸다. 매핑 정보를 확인하려면 안드로이드 버전 히스토리를 참고한다.

iOS 버전 감지하기
iOS
​

iOS에서 Version은 -[UIDevice systemVersion]의 결과물로, 현재 운영체제의 버전을 나타내는 문자열이다. 예를 들어 시스템 버전은 "10.3"과 같은 형태로 표현된다. iOS의 메이저 버전 번호를 감지하는 방법은 다음과 같다:

tsx
import {Platform} from 'react-native';

const majorVersionIOS = parseInt(Platform.Version, 10);
if (majorVersionIOS <= 9) {
  console.log('동작 변경에 대한 해결책 적용');
}

플랫폼별 확장 기능​

플랫폼별 코드가 복잡해지면, 코드를 별도의 파일로 분리하는 것을 고려해야 한다. React Native는 .ios. 또는 .android. 확장자가 붙은 파일을 자동으로 감지하고, 필요한 경우 해당 플랫폼 파일을 로드한다.

예를 들어, 프로젝트에 다음과 같은 파일이 있다고 가정해 보자:

shell
BigButton.ios.js
BigButton.android.js

이 경우 컴포넌트를 다음과 같이 임포트할 수 있다:

tsx
import BigButton from './BigButton';

React Native는 실행 중인 플랫폼에 따라 적절한 파일을 자동으로 선택한다.

네이티브 특화 확장 (NodeJS와 웹 간 코드 공유)​

모듈을 NodeJS/웹과 React Native 간에 공유해야 하지만 Android/iOS 차이가 없는 경우 .native.js 확장자를 사용할 수 있다. 이 방법은 React Native와 ReactJS 간에 공통 코드를 공유하는 프로젝트에서 특히 유용하다.

예를 들어, 프로젝트에 다음과 같은 파일이 있다고 가정해 보자:

shell
Container.js # 웹팩, 롤업 등 웹 번들러에서 사용
Container.native.js # Android와 iOS 모두에서 React Native 번들러(Metro)가 사용

이 경우 .native 확장자 없이도 다음과 같이 모듈을 가져올 수 있다:

tsx
import Container from './Container';

전문가 팁: 프로덕션 번들에 사용되지 않는 코드가 포함되지 않도록 웹 번들러에서 .native.js 확장자를 무시하도록 설정한다. 이렇게 하면 최종 번들 크기를 줄일 수 있다.