[React] Failed to execute 'connect' on 'AudioNode': cannot connect to an AudioNode belonging to a different audio context 에러 해결

[ 문제점 ]

 Web Audio API의 MediaStream, Analyzer, AudioContext 등을 사용하여서 녹음하고, 이를 시각화 하는 작업을 하고 있었다. 그러나 웹을 실행시키면 다음과 같은 에러가 나와서 아예 웹이 죽어버렸다.

Failed to execute 'connect' on 'AudioNode': cannot connect to an AudioNode belonging to a different audio context

[ 해결 방법 ]

 AudioNode 라는 것이 다른 context에 연결되어서 에러가 났다는 것이었다. 나는 분명 audio context를 새로 만들거나 다른 것에 연결한 적이 없었는데 위와 같은 오류가 떠서 해결하는데 많은 시간이 걸렸다.

 오류가 일어난 원인은 React의 2번 렌더링 하는 것이었다. Create React App 을 사용하여서 React를 시작할 경우 React.StricMode 로 App을 감싸서 개발할 때 렌더링을 2번한다. 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

짧은 지식으로 React는 오류를 찾아내기 위해서 렌더링을 두번 한다고 하는데 이 때문에 AudioContext가 달라지고, 이는 결국 다른 Context에 연결되게 되어서 오류가 발생한 듯 하다. 따라서 위와 같이 되어있는 index.tsx를 다음과 같이 고쳐주면 에러는 해결된다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
	<App />
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();