---
tag: rn
---
# RN 몇몇 내용 독해

## 디버깅

[공식 문서](https://reactnative.dev/docs/debugging)

RN의 디버깅 인터페이스는 디바이스(device)와 웹(chrome) 인터페이스로 나뉩니다.

### 디바이스


디바이스의 인터페이스는 디바이스를 흔들어서 접근할 수 있습니다. fast refresh를 설정하거나 키보드 단축키를 활성화 할 수 있습니다.

**Fast Refresh**는 RN 코드의 변경에 대해 즉각적인 피드백을 처리하게 할 수 있습니다.

**inspector**는 개별 컴포넌트의 정보를 보여주는 오버레이를 띄워줍니다.


### 크롬 도구

디바이스의 개발자메뉴에서 원격 JS 디버깅(Debug JS Remotely)를 선택하면 8081포트에서 [debugger-ui](http://localhost:8081/debugger-ui)를 열 수 있습니다.

크롬이 아닌 사파리에서도 활용 가능합니다.

### React 개발자 도구

`react-devtools`는 크롬 extension뿐만 아니라 독립형 도구를 제공합니다. [독립 도구 git](https://github.com/facebook/react/tree/main/packages/react-devtools)


독립도구는 전역으로 설치된 `react-devtools`에 의해 실행할 수 있습니다.

npm i -g react-devtools

react-devtools (실행)

`react-devtools`는 react native의 inspector와 통합될 수 있습니다.


기존의 react와 동일하게 `react-devtools`에서 동작시킬 때 props와 state를 검사할 수 있습니다. 다만 먼저 **크롬 왼쪽 상단 드롭다운에 debuggerWorker.js가 동작하고 있는지 반드시 확인해야합니다.**

## 리엑트 네이티브의 코어 컴포넌트

React native는 코어 컴포넌트, 네이티브 컴포넌트, 커뮤니티 컴포넌트의 종합으로 어플리케이션을 개발합니다.

공식 문서에서 설명하는 주요 코어 컴포넌트는 아래와 같습니다.

**View, Text, Image, ScrollView, TextInput**

위 컴포넌트들은 네이티브 브릿지를 통해 각 플랫폼(Android, IOS, Web)에 해당하는 UI로 변경되어 처리됩니다.

## 터치 관련 옵션들

[공식 문서](https://reactnative.dev/docs/handling-touches)

디바이스에서 유저의 동작과 가장 직접적으로 연결된 것은 touch입니다. 기본적으로 RN은 `Button`을 제공하지만 Button이외의 요소를 touch로 감싸기 위한 고차 컴포넌트를 제공합니다. 개발자는 원하는 피드백에따라 Touchable 컴포넌트를 선택하여 요소를 감쌀 수 있습니다.

**TouchableHighlight**는 터치시 컴포넌트의 배경이 어두워집니다.

**TouchableOpacity**는 터치시 컴포넌트가 투명해집니다.

**TouchableNativeFeedback**은 안드로이드에서 제공하는 native 터치 모듈입니다.

**TouchableWithoutFeedback**은 피드백없이 터치에 대한 이벤트를 제공합니다.

### Scroll 과 Swiping

터치로 동작하는 흔한 제스쳐중에 스크롤링(상 - 하(pans))과 스와이핑(좌 - 우)가 있습니다. 이는 ScrollView에서 집중적으로 다룹니다.

## 애니메이션

[공식 문서](https://reactnative.dev/docs/animations)

애니메이션은 어플리케이션에 생기를 불어넣는 중요한 요소이자, 퍼포먼스와 직결되는 요소입니다.

RN의 `Animated API`는 이를 start/stop으로 제어하는 메서드 기반으로 제공합니다.

`Animated API`는 기본적으로 **View, Text, Image, ScrollView, FlatList, SectionList**가 애니메이션을 제공하는 컴포넌트 타입이지만 `createAnimatedComponent()`를 통해 직접 생성할 수 있습니다.

### Example

import React, { useRef, useEffect } from 'react';

const FadeInView = ({ children }) => {
  const fadeAnim = useRef(new Animated.Value(0)).current;
  
  useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 10000,
      }
    ).start();
  }, [fadeAnim]);
  
  return (
    <Animated.View
      style={{
        opacity: fadeAnim,
      }}
    >
      {children}
    </Animated.View>
  );
}

### Animation의 구성

[공식 문서](https://reactnative.dev/docs/animated#configuring-animations)

`Animated`에 의해 선언된 형태는 타입에 따라 인터페이스를 결정하고 이를 스타일에 적용합니다.

위 코드에서 `timing`은 시간의 흐름에 따른 애니메이션을 선언하며 이는 css의 일반적인 애니메이션과 동일하게 동작합니다. 그외에 `decay`, `spring`등의 다른 타입또한 제공합니다.

또한 애니메이션은 결합될 수 있습니다. 이를 위한 sequence, delay등의 메서드를 제공하고 리스트에 저장된 애니메이션을 지정에따라 start/stop을 진행합니다.

애니메이션은 유저의 동작(스크롤, 스와이프)에 의해서도 처리할 수 있습니다. 이를 `event` 인터페이스로 구현합니다. 예를 들면 캐러셀을 구현할 때 활용될 수 있습니다.

## 안드로이드 네이티브 모듈

[공식 문서](https://reactnative.dev/docs/native-components-android)

네이티브 모듈은 Java(혹은 Kotlin)으로 직접 개발되어 안드로이드 패키지(package)에 추가되어 집니다. 이를 RN에서 사용하기 위한 약간의 설정이 요구됩니다.

흐름은 네이티브 모듈 개발 -> 패키지 개발 -> 패키지 등록 -> RN에서 호출이 됩니다.

네이티브 모듈은 `ReactContextBaseJavaModule`을 상속하는 것을 권장합니다. 이는 액티비티의 생명주기 메소드에 연결될 수 있는 `ReactApplicationContext`를 파라미터로 제공하므로 안정성에 도움이 됩니다. 만약 이가 필요없으면 `NativeModule`을 구현하기만하면(혹은 `BaseJavaModule`을 확장하면) 동작할 수 있습니다.

네이티브 모듈은 JS에서 그 이름으로 선언되기 위해 getName을 반드시 오버라이드 해야합니다.

// add to CalendarModule.java
@Override
public String getName() {
   return "yourModuleName";
}

또한 JS에서 호출될 메서드는 `@ReactMothod`로 데코레이터(decorator)되어야 합니다. `@ReactMethod(isBlockingSynchronousMethod = true)`를 통해 동기 메서드로 표기할 수 있습니다. 다만 이는 성능 저하를 포함하므로 권장하지 않습니다.

@ReactMethod
public void someFunctionCalledInJS() {
}

작성된 모듈은 Package로 선언되고 어플리케이션 레벨에 등록되어 사용됩니다.

자세한 코드는 공식문서를 참고합니다.