이 글에서는 React 소스 코드에서 MessageChannel 사용을 분석합니다.

먼저 MessageChannel이 무엇인지 알아보겠습니다.

메시지채널

채널 메시징 API의 MessageChannel 인터페이스를 사용하면 새 메시지 채널을 생성하고 두 개의 MessagePort 속성을 통해 이를 통해 데이터를 보낼 수 있습니다.

예

다음 예제는 MDN 문서에서 선택되었으며, MessageChannel() 생성자를 사용하여 새 채널이 생성되는 것을 볼 수 있습니다.

IFrame이 로드되면 MessageChannel.port1에 대한 onmessage 핸들러를 등록하고 메시지와 함께 window.postMessage 메소드를 사용하여 MessageChannel.port2를 IFrame으로 전송합니다.

IFrame에서 메시지가 다시 수신되면 onMessage 함수는 메시지를 단락으로 출력합니다.

const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");
// Wait for the iframe to load
iframe.addEventListener("load", onLoad);
function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;
  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage("Hello from the main page!", "*", [
   channel.port2,
  ]);
}
// Handle messages received on port1
function onMessage(e) {
 output.innerHTML = e.data;
}

자, 이제 MessageChannel의 기본을 이해했으니 React 소스 코드에서 사용법을 배워보겠습니다.

React 소스 코드의 MessageChannel 사용법:

const channel = new MessageChannel();
channel.port1.onmessage = callback;
channel.port2.postMessage(undefined);

React가 이를 사용하는 방법은 다음과 같습니다.

• 새 MessageChannel 인스턴스 생성: React는 두 개의 통신 포트가 있는 새 MessageChannel을 생성합니다.

• postMessage를 사용하여 작업 예약: React는 port2.postMessage(undefine)를 사용하여 setTimeout 또는 setImmediate에서 발생할 수 있는 지연이나 간섭 없이 작업을 비동기적으로 트리거합니다.

• onmessage가 트리거될 때 작업 실행: port1.onmessage가 게시된 메시지를 수신하면 작업(enqueueTask에 전달된 콜백)이 실행됩니다.

setTimeout 또는 setImmediate를 사용하지 않는 이유는 무엇입니까? React 코드는 브라우저 환경에서 setTimeout 또는 setImmediate 사용을 피하고 싶다고 암시합니다. 왜냐하면 항상 정확하지 않고 제한, 테스트 환경 또는 기타 최적화(예: 테스트 환경의 가짜 타이머)의 영향을 받을 수 있기 때문입니다. React는 특히 비동기 렌더링 및 업데이트와 관련하여 일정을 세밀하게 제어하기를 원합니다.

회사 소개:

Think Throo에서는 오픈 소스 프로젝트에 사용되는 고급 코드베이스 아키텍처 개념을 가르치는 임무를 수행하고 있습니다.

Next.js/React에서 고급 아키텍처 개념을 연습하여 코딩 기술을 10배 높이고, 모범 사례를 배우고, 프로덕션급 프로젝트를 구축하세요.

저희는 오픈 소스입니다 — https://github.com/thinkthroo/thinkthroo (별표를 주세요!)

코드베이스 아키텍처를 기반으로 한 고급 과정을 통해 팀의 기술을 향상하세요. 자세한 내용은 [email protected]으로 문의하세요!

참조:

• https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel

• https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/shared/enqueueTask.js#L42