리액트에서 이벤트 루프관련해서 질문이 있습니다

안녕하세요. 리액트에서 이벤트 루프 동작 관련해서 제가 이해한내용이 맞는지 질문드립니다! 코드를 간단히 설명드리면 List를 그리는 scroll container가 있고 아이템이 추가되면 마지막으로 추가된 아이템으로 스크롤을 시키려는 코드입니다. (useEffect를 사용해도 되지만 이벤트 루프를 이해하기 위해서 작성하였습니다!) 스크롤을 시키기 위해 작성한 코드는 세가지입니다! 1번 코드는 스크롤이 되지 않습니다. 이유는 리액트에서 batch 업데이트 과정에서 렌더링되기 전에 호출되었으니 스크롤이 되지 않습니다. 2번 코드는 스크롤이 되었습니다. 리액트의 상태변화는 마이크로태스크큐에서 실행이 되었고 렌더링이 발생한 후에 매크 태스크큐가 실행되기 때문에 올바르게 렌더링 후에 실행이 되었습니다. 3번 코드는 스크롤이 되었습니다. 이건 이유를 정확히 모르겠습니다. 개발자 도구에서 실행된 시점을 봐도 마이크로태스크큐에서 스크롤 함수가 실행되었지만 올바르게 실행이 되었습니다. 마이크로 태스크 큐 실행과정에서 appenchild가 발생하고나서 렌더링이 되기전에 이미 레이아웃이 다 계산은 완료가 되는걸까요? 어떻게 이해를 해야될지 모르겠습니다.

1<button
2          type="button"
3          onClick={() => {
4            setListData([...listData, listData.length + 1]);
5            // 1번 코드 call stack에서 바로 실행
6            ref.current?.scrollTo({
7              left: ref.current?.scrollWidth,
8              behavior: "smooth",
9            });
10
11            //2번 코드 매크로태스크 큐를 통해 실행
12            setTimeout(() => {
13              ref.current?.scrollTo({
14                left: ref.current?.scrollWidth,
15                behavior: "smooth",
16              });
17            }, 0);
18
19            //3번 마이크로태스크 큐를 통해 실행
20            Promise.resolve().then(() => {
21              ref.current?.scrollTo({
22                left: ref.current?.scrollWidth,
23                behavior: "smooth",
24              });
25            });
26          }}
27        >
28          <span>+</span>
29        </button>

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

추천해요 0

보충이 필요해요 0

익명님의 질문