Emscripten Embind(C++ 함수를 JavaScript에 바인딩) React에 적용하기

React 앱에 Emscripten Embind lerp 예제 적용

lerp.js, lerp.wasm 만들기
https://nowoodeel.tistory.com/51

Emscripten Embind(C++ 함수를 JavaScript에 바인딩) 사용해 보기

 

PowerShell을 실행하고 lerp-example react 프로젝트를 만든다.

npx create-react-app lerp-example

cd lerp-example

 

public 폴더에 미리 생성한 lerp.js, lerp.wasm 파일을 복사한다.

cp lerp.js lerp-example/public/
cp lerp.wasm lerp-example/public/

lerp-example/
├── public/
│   └── lerp.js, lerp.wasm  // Emscripten으로 컴파일된 JS 파일
├── src/
│   └── App.js   // React 컴포넌트 코드
└── package.json

 

lerp-example/src/App.js를 Emscripten으로 컴파일된 JavaScript를 로드하게 한다.

import React, { useEffect, useState } from 'react';
import './App.css';

function App() {

  const [lerpResult, setLerpResult] = useState(null);

  useEffect(() => {
    // Emscripten 코드가 로드된 후 onRuntimeInitialized 함수가 호출됩니다.
    const loadModule = () => {
      if (!window.Module) {
        window.Module = {
          onRuntimeInitialized: () => {
            const result = window.Module.lerp(1, 2, 0.5);  // 1과 2 사이에서 0.5 위치에 해당하는 값을 계산
            console.log('lerp result:', result);
            setLerpResult(result);  // 결과를 상태에 저장
          },
        };

        // Emscripten으로 컴파일된 JavaScript 파일 로드
        const script = document.createElement('script');
        script.src = '/lerp.js';
        script.async = true;
        script.onload = () => {
          console.log('Emscripten module loaded');
        };
        script.onerror = (error) => {
          console.error('Error loading the Emscripten module', error);
        };
        document.body.appendChild(script);
      }
    };

    loadModule();
  }, []); // 빈 배열을 전달하여 컴포넌트가 처음 마운트될 때만 실행

  return (
    <div className="App">
      <header className="App-header">
        <h1>Lerp Example</h1>
        {lerpResult !== null ? (
          <p>Lerp result: {lerpResult}</p>
        ) : (
          <p>Loading...</p>
        )}
      </header>
    </div>
  );
}

export default App;

 

실행

npm start