0.60 버전으로 성공적으로 업그레이드를 끝내고 신나는 마음으로 개발을 진행하던 중 갑자기 발생한 안드로이드 Crash를 해결하는 과정에서 개념만 알고 지나쳤던 Autolinking에 대해서 살펴보기로 했어요.

<aside> ⚠️ Crash는 lottie-react-native 모듈이 안드로이드 빌드에 제대로 포함되지 않아서 발생한 문제로 정상 동작하도록 PR을 보내서 3.0.4 버전에 반영됐어요.

</aside>

# link 명령이 하던 일

Native 코드가 포함된 모듈을 설치하면 습관적으로 아래처럼 link 명령을 실행해서 각 플랫폼의 빌드 시스템에 포함되도록 연결을 해줘야 했죠.

$ yarn add react-native-webview
$ react-native link react-native-webview

link 명령이 하는 일은 간단해요. 안드로이드를 예로 들면,

• android/settings.gradle 에 프로젝트 추가

include ':react-native-webview'
project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')

• android/app/build.gradle에 의존성 추가

dependencies {
	implementation project(':react-native-webview')
  ...
  implementation "com.facebook.react:react-native:+"
}

• android/app/src/main/java/com/xxx/MainApplication.java 에 패키지 추가

...
import com.reactnativecommunity.webview.RNCWebViewPackage;
...

public class MainApplication extends Application implements ReactApplication {
	...
	@Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new RNCWebViewPackage(),
    );
  }
}

# Autolinking이 하는 일

link 명령을 매번 실행해줘야 하나? 설치된 모듈들의 정보가 package.json 파일에 다 있으니까 자동으로 처리할 수 없을까? 사용자가 접근해서 고치는 설정이나 자바 파일을 직접 수정하는 방식이 최선인가? 충돌이 발생하면 어떻게 하지? 이런 생각으로 만들어진 게 바로 Autolinking입니다.

이제 모듈을 설치하면 추가 작업 없이도 바로 사용할 수 있게 됐는데 어떻게 동작하는지 살펴볼게요.

안드로이드

안드로이드는 native_modules.gradle 스크립트가 빌드 될 때 실행됩니다.

• android/settings.gradle에 추가된 native_modules.gradle이 실행되면 react-native config 외부 명령을 실행해서 얻은 패키지 정보로 Grale 빌드를 위한 프로젝트가 추가돼요.

# android/settings.gradle
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)