리액트 컴포넌트의 동작 파헤치기

전체 코드

import { useEffect, useState } from "react";

function Component1() {
  const [value, setValue] = useState<string>(() => "default");

  useEffect(() => {
    setValue("changed");
  }, []);

  return <div>{value || "nothing"}</div>;
}

해당 리액트 컴포넌트가 JSX형식으로 DOM에 부착되는 과정을 파헤쳐봅시다.

코드 세분화 (Tokenize)

컴포넌트 내부 동작을 자바스크립트의 실행 단위별로 나눠볼 수 있습니다.

1. useState 구문

const [value, setValue] = useState<string>(() => "default");

2. useEffect 구문

useEffect(() => {
  setValue("changed");
}, []);

3. return 구문

return <div>{value || "nothing"}</div>;

컴포넌트 생애주기 (Lifecycle)

Mounted

1. useState 구문
   Mounted 시점에 useState 가 실행되면 최초 값을 할당 합니다.
   이때 useState에 넘겨주는 인자의 타입이 함수이기 때문에 함수를 실행한 값인 "default"를 기본값으로 하여 하나의 훅 구조체가 만들어집니다.

 value === "default"

2. useEffect 구문
   useEffect의 경우, Mounted 시점과 Updated 시점의 차이는 이전 deps에 대한 참조 여부만을 고려하면 됩니다. 지금은 Mounted 시점 이므로 useEffect의 첫번째 인자인 callback부분은 무조건 실행되고 비동기적으로 이루어 집니다.

 value === "default"

3. return 구문
   현재 value 값 인 "default" 를 innerHTML로 갖는 HTMLDivElement가 반환됩니다.

 value === "default"

[default가 화면에 렌더된 이미지]

비동기 (Asynchronous)

현재 Macrotask Queue에는 useEffect구문의 첫번째 인자인 callback이 들어있습니다. Mounted 시점의 모든 동기적 동작이 모두 완료되었기 때문에 예약되어 있는 callback이 실행됩니다. callback 내부에 있는 setValue는 다시 Macrotask Queue에 삽입되고 실행됩니다. SetStateAction인 setValue가 실행 되었고 인자가 value와 다르기 때문에 컴포넌트는 리렌더 됩니다.

 value === "changed"

Updated

1. useState 구문
   Updated 시점에 useState의 반환값은 훅 구조체에서 마지막으로 변경된 값을 가져옵니다. 또한 useState 구문을 브라우저가 해석할 때 () => "default" 는 실행될 필요가 없기때문에 호출되지 않습니다.

 value === "changed"

2. useEffect 구문
   이전 deps인 [] 와 현재 deps인 [] 는 서로 길이가 동일 하고 각 요소를 얕게 비교한 결과가 동일하기 때문에 callback은 실행되지 않습니다.

 value === "changed"

3. return 구문
   현재 value 값 인 "changed" 를 innerHTML로 갖는 HTMLDivElement가 반환됩니다.

 value === "changed"

[changed가 화면에 렌더된 이미지]