[React Native] Platform 모듈 사용하기 - OS 별로 다른 컴포넌트, 스타일을 적용해 보자!

 

 

 

React Native

 

 

 

 

 

  React Native에서 기본으로 제공해주는 `Platform`모듈을 사용하면 iOS와 Android 두 플랫폼을 호환할 수 있습니다! React Native는 크로스 플랫폼 앱을 만들기 위해서 쓰여지는 만큼 Platform을 통한 플랫폼 별 기능 또는 UI를 적용하는 것이 매우 중요합니다. 아주아주 간단한 앱의 경우엔 큰 문제 없이 한쪽의 플랫폼을 통한 개발을 하더라도 큰 문제가 없을 수 있습니다. 하지만 수 많은 기능이 생기다 보면 Android에서는 되는데 iOS에서는 동작하지 않는 라이브러리가 있거나 다른 UI를 보여줘야한다거나 하는 경우가 발생합니다. 이를 위해서 PlatForm을 사용하는 것은 필수적이라고 할 수 있겠습니다. 사용 방법은 아주 간단합니다. 천천히 이해해 볼까요?

 

https://reactnative.dev/docs/platform-specific-code

React Native · A framework for building native apps using React

 

 

 

 

 Platform 모듈을 통해 플랫폼 별 기능을 적용할 때는 문서에 볼 수 있듯이 삼항연산사를 많이 사용합니다. 삼항연산자를 사용하는 것은 일반적이라는 것이지 필수적이 것은 아니에요! if 문을 통해서 사용할 수도 있습니다. 

 

 

 

import { Platform } from 'react-native';

 

 

 

사용은 아주 간단합니다. 아래 코드에서 자세하게 살펴볼게요.

 

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

...

const styles = StyleSheet.create({
    wrapper: Platform.OS === 'ios' 
      ? { backgroundColor: 'red' }
      : { backgroundColor: 'blue'}
});

 

또는

 

import { Platform } from 'react-native';

...

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        ...Platform.select({
            ios: {
                backgroundColor: 'red',
            },
            android: {
                backgroundColor: 'blue',
            },
        }),
    },
});

 

와 같이 각 OS 별로 스타일을 줄 수 있습니다. 그리고 이와 같은 방식으로 기능을 분리하여 적용할 수도 있습니다!

 

 

 

 

  위 예제는 각 플랫폼에 스타일을 적용했지만 컴포넌트에서 UI를 표현할 때 Android와 iOS 상황에 따라 대응하는 방식이 달라질 수 있습니다. 따라서 컴포넌트를 플랫폼에 따라 사용할 때도 사용가능 합니다. 이제 Platform 모듈을 사용함으로써 React Native를 효율적으로 두 플랫폼 개발할 수 있겠나요?

 

 

 

 

 

 

Ref. 📗

https://reactnative.dev/docs/platform-specific-code