Skip to main content

0.36: Headless JS, the Keyboard API, & more

· 4 min read
Héctor Ramos
Héctor Ramos
Former Developer Advocate at Facebook

오늘 React Native 0.36을 출시한다. 새로운 기능에 대해 자세히 알아보자.

Headless JS​

Headless JS는 앱이 백그라운드에 있을 때 JavaScript로 작업을 실행하는 방법이다. 최신 데이터를 동기화하거나, 푸시 알림을 처리하거나, 음악을 재생하는 등의 용도로 사용할 수 있다. 현재는 Android에서만 사용 가능하다.

시작하려면 전용 파일(예: SomeTaskName.js)에 비동기 작업을 정의한다:

module.exports = async taskData => {
  // 여기서 작업을 수행한다.
};

그 다음, AppRegistry에 작업을 등록한다:

AppRegistry.registerHeadlessTask('SomeTaskName', () =>
  require('SomeTaskName'),
);

Headless JS를 사용하려면 필요할 때 서비스를 시작할 수 있도록 네이티브 Java 코드를 작성해야 한다. 더 자세한 내용은 Headless JS 문서를 참고한다!

키보드 API​

Keyboard를 사용하면 화면 키보드를 더 쉽게 다룰 수 있다. 네이티브 키보드 이벤트를 감지하고 반응할 수 있다. 예를 들어, 활성화된 키보드를 닫으려면 Keyboard.dismiss()를 호출하면 된다:

import {Keyboard} from 'react-native';

// 키보드를 닫는다!
Keyboard.dismiss();

애니메이션 나눗셈​

React Native에서는 이미 두 애니메이션 값을 더하거나, 곱하거나, 모듈로 연산하는 기능을 지원한다. 버전 0.36부터는 두 애니메이션 값을 나누는 기능도 추가되었다. 특정 경우에는 계산을 위해 한 애니메이션 값을 다른 애니메이션 값으로 역수로 만들어야 할 때가 있다. 예를 들어 스케일을 역수로 만드는 경우가 있다 (2x --> 0.5x):

const a = Animated.Value(1);
const b = Animated.divide(1, a);

Animated.spring(a, {
  toValue: 2,
}).start();

b는 a의 스프링 애니메이션을 따라가며 1 / a 값을 생성한다.

기본 사용법은 다음과 같다:

<Animated.View style={{transform: [{scale: a}]}}>
  <Animated.Image style={{transform: [{scale: b}]}} />
<Animated.View>

이 예제에서 내부 이미지는 부모의 스케일링이 상쇄되기 때문에 전혀 늘어나지 않는다. 더 자세히 알고 싶다면 애니메이션 가이드를 참고한다.

다크 상태 바​

StatusBar에 새로운 barStyle 값인 dark-content가 추가되었다. 이제 barStyle을 Android와 iOS 모두에서 사용할 수 있다. 각 값의 동작 방식은 다음과 같다:

  • default: 플랫폼 기본값을 사용한다(iOS에서는 밝은 색, Android에서는 어두운 색).
  • light-content: 검은색 텍스트와 아이콘이 있는 밝은 상태 바를 사용한다.
  • dark-content: 흰색 텍스트와 아이콘이 있는 어두운 상태 바를 사용한다.

그리고 더 많은 변화들​

위 내용은 0.36 버전에서 변경된 사항의 일부에 불과하다. 새로운 기능, 버그 수정, 주요 변경 사항의 전체 목록을 확인하려면 GitHub의 릴리스 노트를 참고한다.

터미널에서 다음 명령어를 실행해 0.36 버전으로 업그레이드할 수 있다:

$ npm install --save react-native@0.36
$ react-native upgrade