[[React Native 게임 최적화 (JSI, Hermes)|React Native 게임 최적화 (JSI, Hermes)]]
📌 Brief Summary
Optimizing games in React Native involves moving beyond the traditional bridge-based communication. By leveraging the JavaScript Interface (JSI) for direct synchronous calls and the Hermes engine for efficient bytecode execution, developers can achieve near-native performance for complex interactive systems.

📖 Core Content
* **JSI (JavaScript Interface):** Unlike the old bridge that required JSON serialization and asynchronous message passing, JSI allows the JavaScript engine to hold a direct reference to C++ host objects. This enables high-frequency updates (e.g., 60fps game loops) between JS and native modules.
* **Hermes Engine:** A JavaScript engine optimized specifically for React Native. It reduces app size, memory consumption, and "Time to Interactive" (TTI) by performing ahead-of-time (AOT) bytecode compilation.
* **TurboModules:** The evolution of Native Modules using JSI. It allows for lazy loading of native features, which is crucial for large-scale games to keep the initial memory footprint low.
* **Fabric Renderer:** The new concurrent rendering system that allows JS to communicate synchronously with the UI layer, reducing layout jumps and improving responsiveness in touch-heavy game interfaces.
* **Best Practices:**
    * Use `react-native-reanimated` for JSI-based animations.
    * Use `react-native-skia` for high-performance 2D graphics directly on the GPU.

🔗 Knowledge Connections
* Related Topics: High-Performance-Mobile-Development, C++ Interop, JS Engine Architecture
* Projects/Contexts: Cross-Platform Game Engines, Skybound Mobile Port
* Contradictions/Notes: While JSI significantly improves speed, it requires more advanced C++ knowledge to implement custom host objects compared to the old bridge.

Last updated: 2026-04-18