리액트 스케줄러 완전 분석: MessageChannel을 선택한 이유

function render() {
    while (5ms 지날때까지) {
       다음작업 = 렌더링()
    }

    requestIdleCallback(다음작업) // 브라우저로 제어권 넘기기
}

// requestIdleCallback 사용 예시
requestIdleCallback((deadline) => {
    // deadline.timeRemaining()으로 남은 시간 확인 가능
    while (deadline.timeRemaining() > 0 && 해야할일이있다면) {
        일부작업수행();
    }

    if (아직할일이있다면) {
        requestIdleCallback(계속작업); // 다음 유휴 시간에 재예약
    }
});

console.time('setTimeout');
setTimeout(() => {
    console.timeEnd('setTimeout'); // 실제로는 4ms 이상
}, 0);

const channel = new MessageChannel();
const port1 = channel.port1;
const port2 = channel.port2;

port1.onmessage = () => {
    console.log('메시지 받음!');
};

port2.postMessage('hello'); // port1으로 메시지 전송

// React 스케줄러의 실제 코드 (정확한 버전)
let schedulePerformWorkUntilDeadline;

if (typeof setImmediate === 'function') {
    // Node.js와 IE에서 setImmediate가 가장 우선순위가 높음
    // MessageChannel보다 더 나은 의미론(semantics)을 제공
    schedulePerformWorkUntilDeadline = () => {
        setImmediate(performWorkUntilDeadline);
    };
} else if (typeof MessageChannel !== 'undefined') {
    // 대부분의 브라우저에서 MessageChannel 사용
    const channel = new MessageChannel();
    const port = channel.port2;

    channel.port1.onmessage = performWorkUntilDeadline;

    schedulePerformWorkUntilDeadline = () => {
        port.postMessage(null);
    };
} else {
    // 최후의 fallback으로 setTimeout 사용
    schedulePerformWorkUntilDeadline = () => {
        setTimeout(performWorkUntilDeadline, 0);
    };
}

// React Scheduler의 workLoop (단순화)
function workLoop() {
    while (workInProgress !== null && !shouldYieldToHost()) {
        // 하나의 Fiber 노드 처리
        workInProgress = performUnitOfWork(workInProgress);
    }

    if (workInProgress !== null) {
        // 아직 할 일이 남았다면 다음 사이클에 예약
        schedulePerformWorkUntilDeadline();
    }
}

function shouldYieldToHost() {
    // 현재 시간이 데드라인을 넘었는지 확인
    return getCurrentTime() >= deadline;
}

// Render Phase의 주요 작업들
function renderPhase() {
    // Work in Progress 트리 생성
    const wipTree = createWorkInProgressTree(currentTree);

    // 트리 순회하며 변경사항 탐지
    while (currentFiber !== null) {
        // props, state 비교
        const hasChanges = comparePrevAndNext(currentFiber);

        if (hasChanges) {
            // Effect 플래그 마킹
            currentFiber.flags |= Update;
        }

        // 시간 체크 - 중단 가능 지점
        if (shouldYieldToHost()) {
            scheduleNextWork();
            return; // 여기서 중단!
        }

        currentFiber = getNextFiber(currentFiber);
    }
}

// Commit Phase는 동기적으로 실행
function commitPhase(finishedWork) {
    // DOM 변경사항 적용 - 중단 불가!
    commitAllWork(finishedWork);

    // 트리 교체
    currentTree = finishedWork;
}

// React의 Lane 정의 (실제 코드)
export const NoLanes = 0b0000000000000000000000000000000;
export const SyncLane = 0b0000000000000000000000000000010;
export const InputContinuousLane = 0b0000000000000000000000000000100;
export const DefaultLane = 0b0000000000000000000000000010000;
export const TransitionLane1 = 0b0000000000000000000000001000000;
// ... 총 31개의 Lane

// Lane 조작 예시
function hasLanes(lanes, subset) {
    return (lanes & subset) !== 0; // AND 연산으로 포함 여부 확인
}

function mergeLanes(a, b) {
    return a | b; // OR 연산으로 Lane 합치기
}

function removeLanes(set, subset) {
    return set & ~subset; // NOT + AND 연산으로 Lane 제거
}

// 예: 버튼 클릭, 입력 필드 포커스
onClick={() => {
    // 이 업데이트는 SyncLane에 할당됨
    setCount(count + 1);
}}

// 예: 드래그, 스크롤 이벤트
onMouseMove={(e) => {
    // InputContinuousLane에 할당
    setMousePosition({ x: e.clientX, y: e.clientY });
}}

// 예: 네트워크 응답 후 상태 업데이트
fetch('/api/data').then(data => {
    // DefaultLane에 할당
    setData(data);
});

function scheduleCallback(priorityLevel, callback) {
    const currentTime = getCurrentTime();

    // 우선순위에 따른 타임아웃 설정
    let timeout;
    switch (priorityLevel) {
        case ImmediatePriority:
            timeout = -1; // 즉시 실행
            break;
        case UserBlockingPriority:
            timeout = 250; // 250ms 내 실행
            break;
        case NormalPriority:
            timeout = 5000; // 5초 내 실행
            break;
        case LowPriority:
            timeout = 10000; // 10초 내 실행
            break;
        case IdlePriority:
            timeout = maxSigned31BitInt; // 무기한 연기 가능
            break;
    }

    const expirationTime = currentTime + timeout;

    // 우선순위 큐에 삽입
    const newTask = {
        callback,
        priorityLevel,
        expirationTime,
        sortIndex: expirationTime
    };

    push(taskQueue, newTask);

    // 스케줄링 시작
    requestHostCallback(flushWork);
}

// 5ms는 기본값이지만 동적으로 조정 가능
let yieldInterval = 5; // 기본값

// forceFrameRate API로 디바이스에 맞게 조정 가능
function forceFrameRate(fps) {
    if (fps < 0 || fps > 125) {
        console.error('forceFrameRate는 0-125 사이의 값만 허용');
        return;
    }
    if (fps > 0) {
        yieldInterval = Math.floor(1000 / fps); // fps에 따라 동적 계산
    } else {
        yieldInterval = 5; // 기본값으로 리셋
    }
}

function performWorkUntilDeadline() {
    const currentTime = getCurrentTime();
    deadline = currentTime + yieldInterval; // 동적으로 계산된 시간 사용

    let hasMoreWork = true;
    try {
        hasMoreWork = scheduledHostCallback(); // 실제 작업 수행
    } finally {
        if (hasMoreWork) {
            // 아직 할 일이 있다면 다음 사이클에 예약
            schedulePerformWorkUntilDeadline();
        }
    }
}

// 사용자가 버튼을 클릭했을 때
function onClick() {
    // discrete event는 자동으로 sync priority로 처리됨
    setCount(count + 1); // 이 업데이트는 microtask에 예약됨
}

// 또는 명시적으로 flushSync 사용
flushSync(() => {
    setCount(count + 1); // 이 업데이트도 microtask에 예약됨
});

// 이벤트 루프 우선순위
// 1. 현재 실행 중인 코드 완료
// 2. Microtask Queue의 모든 작업 실행 (SyncLane이 여기!)
// 3. Macrotask Queue에서 하나의 작업 실행 (MessageChannel이 여기)
// 4. 브라우저 렌더링 (필요한 경우)
// 5. 다시 1번부터 반복

console.log('1. 동기 코드');

// MessageChannel (Macrotask)
schedulePerformWorkUntilDeadline();

// Microtask (SyncLane)
queueMicrotask(() => {
    console.log('3. Microtask - SyncLane 처리');
});

Promise.resolve().then(() => {
    console.log('4. Promise microtask');
});

console.log('2. 동기 코드 끝');

// 실행 순서: 1 → 2 → 3 → 4 → MessageChannel 콜백

// React의 실제 구현 (단순화)
function scheduleSyncCallback(callback) {
    // React 18부터: microtask에 스케줄링
    queueMicrotask(() => {
        flushSyncCallbacks(); // 모든 sync 업데이트를 즉시 처리
    });
}

function scheduleCallback(priority, callback) {
    // 일반 업데이트들: MessageChannel에 스케줄링 (Macrotask)
    schedulePerformWorkUntilDeadline();
}

// 클릭 이벤트 핸들러
function handleClick() {
    setCount(count + 1); // 자동으로 microtask에 예약됨
    console.log('클릭 핸들러 끝');

    // 이 콘솔 로그 다음에 즉시 microtask가 실행되어
    // DOM이 업데이트됨 (Macrotask 작업들보다 먼저!)
}

function handlePrint() {
    flushSync(() => {
        setIsPrinting(true); // microtask에 예약
    });
    // 여기서 DOM은 이미 업데이트 완료 상태
    window.print(); // 정확한 상태로 프린트됨
}

// React의 기본 동작
function 새로운업데이트가시작될때() {
    // 1. 먼저 이전 useEffect들을 모두 실행
    이전useEffect들실행(); // paint 여부와 상관없이!

    // 2. 그 다음에 새 렌더링 시작
    새렌더링시작();
}

function MyComponent() {
    const [count, setCount] = useState(0);

    useLayoutEffect(() => {
        // 여기서 상태를 바꾸면?
        setCount(prev => prev + 1); // 새 업데이트가 paint 전에 시작됨!
    });

    useEffect(() => {
        console.log('나는 paint 후에 실행될 줄 알았는데...');
        // 실제로는 paint 전에 실행됨!
    });
}

function handleClick() {
    setCount(count + 1); // 클릭으로 인한 업데이트
}

useEffect(() => {
    console.log('클릭 때문에 나도 paint 전에 실행될 수 있음');
});

// Commit Phase에서 Effect 스케줄링
function commitRoot(root, finishedWork) {
    // DOM 변경사항 즉시 적용
    commitMutationEffects(finishedWork);

    // Layout Effects 동기 실행 (useLayoutEffect)
    commitLayoutEffects(finishedWork);

    // Passive Effects 비동기 예약 (useEffect)
    if (rootDoesHavePassiveEffects) {
        scheduleCallback(NormalPriority, () => {
            flushPassiveEffects();
            return null;
        });
    }
}

// 클릭 이벤트로 인한 useEffect는 paint 전에 실행될 수 있음
function handleClick() {
    setCount(count + 1);
}

useEffect(() => {
    // 클릭으로 인한 렌더링이라면 paint 전에 실행될 수 있음
    console.log('Effect 실행');
});

function MyComponent() {
    const [count, setCount] = useState(0);

    useLayoutEffect(() => {
        // 여기서 상태 업데이트가 일어나면
        if (someCondition) {
            setCount(prev => prev + 1); // 새로운 렌더링이 paint 전에 시작됨
        }
    });

    useEffect(() => {
        // 이 Effect도 paint 전에 실행될 수 있음!
        console.log('Effect 실행');
    });

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