리액트 네이티브에서 네이티브 모듈을 만드는 방법은 무엇인가요?

Q1: 리액트 네이티브에서 네이티브 모듈이란 무엇인가요?
A1: 네이티브 모듈은 리액트 네이티브에서 자바스크립트가 직접 접근할 수 없는 네이티브 플랫폼(Android의 Java/Kotlin, iOS의 Objective-C/Swift) 기능을 사용할 수 있도록 브리지 역할을 하는 코드입니다.

Q2: 네이티브 모듈을 만드는 기본적인 절차는 어떻게 되나요?
A2:
1. 네이티브 플랫폼(Android/iOS)에서 모듈 클래스를 작성
2. 브리지에 모듈 등록
3. 자바스크립트에서 네이티브 모듈 불러오기 및 사용

Q3: Android에서 리액트 네이티브 네이티브 모듈 만드는 방법은?
A3:
1. Java/Kotlin으로 `ReactContextBaseJavaModule`을 상속한 클래스를 생성
2. `getName()` 메서드를 오버라이드하여 모듈명을 지정
3. 네이티브 메서드를 `@ReactMethod` 어노테이션과 함께 작성
4. 모듈을 등록할 `ReactPackage`를 구현하여 `createNativeModules()`에 모듈 추가
5. `MainApplication`에서 `ReactPackage`를 리턴 리스트에 포함

예시:
```java
public class MyModule extends ReactContextBaseJavaModule {

public MyModule(ReactApplicationContext reactContext) {
super(reactContext);
}

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

@ReactMethod
public void customMethod(String message, Promise promise) {
// 네이티브 로직 처리
promise.resolve("Received: " + message);
}
}
```

Q4: iOS에서 리액트 네이티브 네이티브 모듈 만드는 방법은?
A4:
1. Objective-C 또는 Swift로 `RCTBridgeModule` 프로토콜을 채택하는 클래스를 생성
2. `RCT_EXPORT_MODULE()` 매크로로 모듈명 등록 (Objective-C)
3. `RCT_EXPORT_METHOD` 또는 Swift에서는 `@objc` 메서드로 자바스크립트에 노출
4. 모듈의 메소드는 비동기(Promise) 또는 동기 형식으로 작성 가능

예시(Objective-C): ```objc
import

@interface MyModule : NSObject
@end

@implementation MyModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(customMethod:(NSString *)message resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
{
NSString *response = [NSString stringWithFormat:@"Received: %@", message];
resolve(response);
}

@end
```

Q5: 자바스크립트에서 네이티브 모듈을 어떻게 사용하나요?
A5:
```javascript
import { NativeModules } from 'react-native';
const { MyModule } = NativeModules;

MyModule.customMethod('Hello')
.then(response => console.log(response))
.catch(error => console.error(error));
```

Q6: Promise 외에 콜백 방식도 가능한가요?
A6: 예, `@ReactMethod`에 콜백 함수를 인자로 넘겨 호출하는 방식도 지원됩니다.

Q7: 네이티브 모듈 작성 시 주의사항이 있나요?
A7:
- 메서드는 반드시 `@ReactMethod` 또는 `RCT_EXPORT_METHOD`로 노출
- UI 관련 코드는 메인 스레드에서 실행
- 네이티브와 자바스크립트 간 데이터 타입을 맞춤
- 앱 재빌드가 필요함

Q8: 네이티브 UI 컴포넌트와는 다른가요?
A8: 네이티브 모듈은 기능 로직용이며 UI 커스텀은 네이티브 UI 컴포넌트로 별도 구현합니다.

---

요약하자면, 리액트 네이티브 네이티브 모듈은 플랫폼별 네이티브 코드에 JS로 접근하기 위한 브리지를 만드는 것으로, Android와 iOS에서 각각 지정된 방식으로 클래스를 작성하고, 자바스크립트에서 `NativeModules`를 통한 호출로 사용합니다.

리액트 네이티브에서 상태 관리 라이브러리를 사용하는 이유는 무엇인가요?

리액트 네이티브에서 컴포넌트를 만드는 방법은 무엇인가요?

리액트 네이티브(React Native)는 자바스크립트로 모바일 애플리케이션을 개발할 수 있게 해주는 프레임워크입니다.

그러나 때때로 자바스크립트로는 구현하기 어려운 기능이나 성능이 필요한 경우가 있습니다.

이럴 때 네이티브 모듈을 만들어 리액트 네이티브와 네이티브 코드(안드로이드의 경우 자바/Kotlin, iOS의 경우 Objective-C/Swift)를 연결할 수 있습니다.

아래는 리액트 네이티브에서 네이티브 모듈을 만드는 방법에 대한 단계별 가이드입니다.

1. 프로젝트 설정 리액트 네이티브 프로젝트를 생성합니다.

아래 명령어를 사용하여 새로운 프로젝트를 생성할 수 있습니다.

```bash npx react-native init MyProject cd MyProject ```

2. 네이티브 모듈 생성 안드로이드 1. Java/Kotlin 파일 생성 : `android/app/src/main/java/com/myproject` 디렉토리 내에 새로운 Java/Kotlin 파일을 생성합니다.

예를 들어, `MyNativeModule.java` 또는 `MyNativeModule.kt`를 생성합니다.



2. 모듈 코드 작성 : ```java package com.myproject; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.facebook.react.bridge.ReactMethod; import com.facebook.react.bridge.Promise; public class MyNativeModule extends ReactContextBaseJavaModule { MyNativeModule(ReactApplicationContext context) { super(context); } @Override public String getName() { return "MyNativeModule"; } @ReactMethod public void myNativeMethod(String message, Promise promise) { // 네이티브 코드 로직 promise.resolve("Received: " + message); } } ```

3. 패키지 등록 : `MyNativeModule`을 포함하는 패키지를 생성합니다.

```java package com.myproject; import com.facebook.react.ReactPackage; import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.JavaScriptModule; import com.facebook.react.uimanager.ViewManager; import java.util.ArrayList; import java.util.Collections; import java.util.List; public class MyNativeModulePackage implements ReactPackage { @Override public List createNativeModules(ReactApplicationContext reactContext) { List modules = new ArrayList<>(); modules.add(new MyNativeModule(reactContext)); return modules; } @Override public List> createJSModules() { return Collections.emptyList(); } @Override public List createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } } ```

4. 패키지 등록 : `MainApplication.java` 파일에서 패키지를 등록합니다.

```java @Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), new MyNativeModulePackage() // 추가 ); } ``` iOS 1. Objective-C/Swift 파일 생성 : `ios/MyProject` 디렉토리 내에 새로운 Objective-C 또는 Swift 파일을 생성합니다.

예를 들어, `MyNativeModule.m` 또는 `MyNativeModule.swift`를 생성합니다.



2. 모듈 코드 작성 : ```objective-c import @interface RCT_EXTERN_MODULE(MyNativeModule, NSObject) RCT_EXTERN_METHOD(myNativeMethod:(NSString *)message resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) @end ``` Swift의 경우: ```swift import Foundation import React @objc(MyNativeModule) class MyNativeModule: NSObject { @objc func myNativeMethod(_ message: String, resolver: @escaping RCTPromiseResolveBlock, rejecter: @escaping RCTPromiseRejectBlock) { resolver("Received: \(message)") } } ```

3. 모듈 등록 : `MyProject-Bridging-Header.h` 파일을 생성하고 Objective-C와 Swift 간의 브리징을 설정합니다.



3. 자바스크립트에서 모듈 사용 이제 자바스크립트 코드에서 네이티브 모듈을 사용할 수 있습니다.

```javascript import { NativeModules } from 'react-native'; const { MyNativeModule } = NativeModules; MyNativeModule.myNativeMethod('Hello from React Native!') .then(response => { console.log(response); // "Received: Hello from React Native!" }) .catch(error => { console.error(error); }); ```

4. 빌드 및 실행 모듈을 추가한 후, 프로젝트를 빌드하고 실행합니다.

```bash npx react-native run-android ``` 또는 ```bash npx react-native run-ios ```

5. 디버깅 및 테스트 모듈이 정상적으로 작동하는지 확인하기 위해 콘솔 로그를 사용하여 디버깅합니다.

또한, 다양한 입력값을 테스트하여 모듈의 안정성을 확인합니다.

결론 리액트 네이티브에서 네이티브 모듈을 만드는 과정은 자바스크립트와 네이티브 코드 간의 상호작용을 가능하게 하여, 성능을 최적화하고 특정 기능을 구현할 수 있는 강력한 방법입니다.

위의 단계들을 따라하면 자신만의 네이티브 모듈을 쉽게 만들 수 있습니다.