[리포트/개념정리] TurboModules와 JSI(JavaScript Interface) 완전 정복: React Native 성능 혁신의 핵심

React Native의 새로운 아키텍처는 성능, 확장성, 개발자 경험을 크게 개선하기 위해 등장했습니다. 그 핵심이 되는 두 개념이 바로 TurboModules와 JSI(JavaScript Interface)입니다. 이 글에서는 관련 공식 문서, 실무 블로그, 예제 튜토리얼을 한눈에 정리했습니다.

---

🧱 TurboModules & JSI란?

TurboModules란?

• 기존 Native Modules보다 더 빠른 통신을 위해 설계된 모듈 시스템
• JS에서 필요한 시점에 동적으로 로드됨 (Lazy Load)
• 브릿지를 통한 비동기 JSON 직렬화 대신, JSI를 활용한 직접 호출 방식 사용

JSI(JavaScript Interface)란?

• JavaScript와 C++ 간의 직접적인 통신을 가능하게 하는 인터페이스
• 브릿지 없이 JS에서 C++ 객체나 함수를 동기적 호출 가능
• 대용량 데이터 처리에 적합하며, 직렬화 오버헤드 제거

---

📚 공식 문서

제목	링크	언어	유형	요약
About the New Architecture	reactnative.dev	영어	공식 문서	React Native의 새로운 아키텍처 전반 소개. TurboModules, JSI 도입 이유와 장점 설명.
Turbo Native Modules – Introduction	reactnative.dev	영어	공식 문서	TurboModule 구현 튜토리얼. TypeScript 스펙 정의 → Codegen → Android/iOS 네이티브 구현 흐름 설명.
Expo Modules API – Overview	docs.expo.dev	영어	공식 문서	Expo에서 TurboModules를 대체할 수 있는 Expo Modules API 소개 및 적용 가이드.

---

✍️ 기술 블로그 & 실무 정리

제목	링크	언어	유형	요약
Bridgeless Native Development	Callstack Blog	영어	기업 블로그	TurboModules와 JSI 기반의 Bridgeless 개발 방식 소개. Nitro Modules 도구로 DX 개선.
TurboModules, JSI, Fabric Explained	OrangeLoops	영어	블로그	새 아키텍처 3대 요소 설명. Expo와의 호환성 및 도입 전략 포함.
Understanding JSI in React Native	Medium	영어	블로그	JSI 작동 원리와 브릿지 방식 대비 성능 장점 설명.
React Native 아키텍처 이해	Tistory	한글	개인 블로그	JSI와 TurboModules 개념을 비유와 함께 설명. 구조 변화에 따른 이점 정리.
RN New Architecture 요약	Velog	한글	개인 블로그	RN 0.68 이상 버전의 새로운 아키텍처 흐름, 장단점, 빌드 시 변화 포인트 설명.
아키텍처 가이드 정리	Medium	한글	개인 블로그	앱/라이브러리 호환성 매트릭스, Bridgeless 모드, TurboModules 적용 포인트 정리.

---

🛠 예제 코드 & 튜토리얼

제목	링크	언어	유형	요약
TurboModules 튜토리얼 (Amazon)	Amazon Dev Blog	영어	튜토리얼	Android 네이티브 API를 활용한 TurboModule 구현 단계별 설명.
GitHub 예제 코드	GitHub Repo	영어	GitHub	디바이스 이름을 반환하는 TurboModule 샘플 구현. TypeScript ↔ Android 연결 과정 포함.
Dynamic Pricing 예제	Stackademic	영어	튜토리얼	배터리 상태, 디바이스 모델명 등 실제 네이티브 정보 활용 예제.

---

🚀 Expo에서 TurboModules 사용 시 주의사항

• Expo Managed Workflow에서는 직접 TurboModule 사용이 불가능
• Bare Workflow 또는 Development Build에서는 직접 구현 가능
• 대부분의 Expo SDK는 이미 JSI 기반으로 구현되어 성능 이점 유지

✅ 권장 방식: New Architecture를 활용하고 싶다면, Expo Dev Client를 사용하거나 Bare 워크플로우로 전환

---

✅ 마무리 정리

• TurboModules는 브릿지 없이 직접 호출이 가능해 성능 극대화 가능
• JSI는 JS <-> C++ 객체 간 상호작용을 동기적으로 처리
• Expo에서도 점진적으로 지원 확대 중이며, 개발자 빌드를 통한 활용 가능

새로운 아키텍처는 단순한 기술 변경을 넘어, React Native의 차세대 표준이 될 것입니다. 위 문서와 예제를 참고하여 TurboModules와 JSI를 프로젝트에 도입해보세요!