[React Native] React Native의 변수를 안드로이드 네이티브에 전달하기(네이티브 메서드 RN에서 사용하기)

김방토·2024년 4월 23일

React Native

목록 보기

4/7

나를 n일동안 힘들게 한 기능...😢
드디어 성공한 기념으로 정리해본다
꼭 필요한 누군가에게 서치가 잘 걸리길 바라면서...

목표

// App.tsx
const msg = 'hello react native';

리액트 최상위 컴포넌트에 변수 하나를 만들어 놓았다.
이 변수를 네이티브로 전달해 안드로이드 네이티브에서 로그에 출력하도록 만들어 볼 것이다.
더욱 자세한 설명은 리액트 네이티브 공식 문서에서 확인하시라.
지금 이 글에서는 공식 문서보다 조금 더 간결한 기능(로그 출력)으로 설명한다.

RN과 안드로이드 네이티브 연결하기

요약

쉽게 정리하면,
1. 안드로이드 네이티브에서 어떤 기능(네이티브 기능)을 담당하는 '모듈'을 만든다.
2. 그 모듈을 리액트 네이티브와 연결하는 '패키지'를 만든다.
3. 패키지를 통해 등록된 모듈을 리액트 네이티브에서 사용할수 있게 된다.
이런 과정이다.

모듈 작성 - PrintLogModule.java

public class PrintLogModule extends ReactContextBaseJavaModule {

    public PrintLogModule(ReactApplicationContext reactApplicationContext) {
        super(reactApplicationContext);
    }

    @NonNull
    @Override
    public String getName() {
        return "PrintLogModule";
    }

    @ReactMethod
    public void logMsg(String msg) {
        Log.d("ReactNativeJs", "logMsg: " + msg);
    }
}

ReactContextBaseJavaModule를 상속받는 모듈을 작성한다.
getName()의 반환값으로 지정한 이름이 RN에서 모듈을 호출할 수 있는 이름이 된다.
메소드를 작성할때 @ReactMethod를 붙여주면, 리액트 네이티브에서 이를 인식하고 사용할수 있게 된다.

패키지 작성 - PrintLogPackage.java

public class PrintLogPackage implements ReactPackage {
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactApplicationContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new PrintLogModule(reactApplicationContext));
        return modules;
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactApplicationContext) {
        return Collections.emptyList();
    }
}

ReactPackage를 상속받는 패키지를 작성한다.
createNativeModules()는 네이티브 모듈의 리스트를 반환하는데, 새로운 리스트를 만들어 그 리스트에 우리가 만든 모듈을 넣어주는 것이다.
createViewManagers()에서는 네이티브로 커스텀한 UI를 RN 컴포넌트에서 JS에서 사용할수 있게 도와주는데, 지금은 쓰지 않으니 빈 컬렉션으로 반환해준다.

RN에서 네이티브 코드 호출하기 - App.tsx

컴포넌트는 원하는 곳에서 호출하면 되겠지만, 지금은 테스트를 위해 최상위 컴포넌트인 App에서 진행했다.

export default function App(): React.JSX.Element {
  const {PrintLogModule} = NativeModules;

  const msg = 'hello react native';
  PrintLogModule.logMsg(msg);

  return ...; // 생략
}