Trigger, Schedule, Render, Commit

리액트 코드 곳곳에 breakpoint를 걸어서 함수 콜스택을 살펴보자. 리액트 내부 코드와 익숙해져보는 시간이니 함수명들에 압도되지 말고 가볍게~ 살펴보자.

개발자도구를 켜고 아래 샌박을 새로고침해보자. 모바일이면... 구경만 하자.

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

export default function App() {
  const [count, setCount] = useState(1);
  debugger; // breakpoint 1

  useEffect(() => {
  debugger; // breakpoint 3
  setCount((count) => count + 1);
  }, []);

  return <button>{count}</button>;

}

이전 게시물처럼 리액트를 직접 설치해서 쓴다면 https://stackoverflow.com/questions/77657008/ 을 참고하자.

리액트가 내가 만든 컴포넌트를 실행

breakpoint1에서 멈춘다. 리액트가 내가 만든 App 함수를 실행하는 순간이다. 위쪽이 callee 함수, 아래쪽이 caller 함수이다.

샌박 관련된 함수는 무시하고 리액트 스크립트쪽 함수들만 살펴보자. (리액트 초기 설정 게시물을 참고해 직접 로컬에서 확인해봐도 좋다. 이러면 샌박 관련 함수들이 없어져 콜스택이 좀 더 깔끔해진다.)

뭐가 뭔지 하나도 모르겠는게 정상이다. render 함수도 보이고 FunctionComponent 어쩌구 함수도 보인다.

리액트가 DOM을 수정

크롬 inspector에서 DOM 요소 우클릭을 하면 DOM이 바뀔 때 breakpoint를 설정할 수 있다. 이전 breakpoint가 걸린채로<div id="root"></div> 에 breakpoint를 걸고 스크립트 실행을 재개해보자.

리액트가 DOM을 수정하는 순간이다. commit이란 단어가 많이 보인다.

리액트가 이펙트를 실행

다시 스크립트 실행을 재개해보다. 이번엔 breakpoint 3에서 멈춘다. 리액트가 useEffect에 건넨 함수를 실행하는 순간이다.

여기도 commit이라는 이름의 함수가 좀 보인다.

지금까지 사진을 보면 모두 performWorkUntilDeadline에서 시작한다는 공통점이 있다. 할 일을 중계하는 역할의 함수인걸까?