리액트 딥다이브 1탄

렌더 단계 (Render Phase)
-> Virtual DOM에서 컴포넌트의 변경사항을 준비
-> Reconciliation(재조정) 과정을 통해 다음 요소들을 비교

- type (예: div, span)
- _ props (컴포넌트에 전달된 속성들)
- key (리스트 렌더링시 사용되는 고유값)

->위의 요소들 중 변경이 필요한 부분을 표시(mark)

이 과정은 비동기적으로 진행될 수 있음

React.useEffect(() => {
  function addMouseEvent() {
    console.log(count);
  }

  window.addEventListener("click", addMouseEvent);
  return () => {
    console.log("클린업 함수 실행!", count);
    window.removeEventListener("click", addMouseEvent);
  };
}, [count]);

React.useEffect(() => {
  console.log(number);
}, [number]);

function Component() {
  console.log("렌더링");
}

function Component() {
  React.useEffect(() => {
    console.log("렌더링 됨");
  }, []);
}

function WindowSizeTracker({ onSizeChange }) {
  // 🚨 잘못된 사용
  useEffect(() => {
    const handleResize = () => {
      // prop으로 전달된 onSizeChange가 변경되어도
      // 이전 함수를 계속 사용
      onSizeChange(window.innerWidth, window.innerHeight);
    };
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []); // onSizeChange prop이 변경되어도 이전 함수 참조
  return null;
}