자바스크립트에서 const로 리액트 컴포넌트를 만들었을 때, window 객체는 해당 컴포넌트별로 사용하는건가?

const 키워드로 만든 리액트 컴포넌트는 각 컴포넌트마다 독립적인 인스턴스가 생성되므로,

해당 컴포넌트의 내부에서 window 객체를 사용하더라도 전역 스코프의 window 객체와는 별개로 새로운 window 객체가 생성됩니다.

 

여기서 독립적인 인스턴스라는 것을 어떻게 아냐?

<Example1 />로 할당하면 새로운 인스턴스를 생성합니다.

Object.is()를 통해서 a와 b의 인스턴스가 서로 다른 독립적인 인스턴스라는 것을 말해줍니다.

import React from "react";

const Example1 = () => {
  var count = 0;

  function handleClick() {
    count++;
    console.log(`Count is now ${count}`);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

function App() {
  const a = <Example1 />;
  const b = <Example1 />;

  console.log(Object.is(a, b)); // false

  return (
    <>
      {Example1()}
      {Example1()}
    </>
  );
}

export default App;

 

즉, 각 컴포넌트는 자신만의 독립적인 스코프를 가지며, 해당 스코프 내에서 변수와 함수 등을 정의하고 사용합니다.

따라서, const 키워드로 만든 리액트 컴포넌트 내부에서 window 객체를 사용하면,

해당 컴포넌트의 스코프 내에서만 유효한 window 객체가 생성되며,

전역 스코프의 window 객체와는 별개로 동작합니다.

 

이로 인해, 각 컴포넌트가 자신만의 독립적인 환경을 유지할 수 있습니다.

예를 들어, 다음과 같이 const 키워드로 만든 간단한 리액트 컴포넌트에서 window.innerWidth 값을 출력해보면,

해당 컴포넌트의 스코프 내에서만 유효한 window 객체가 생성되는 것을 확인할 수 있습니다.

import React from "react";

const MyComponent = () => {
  console.log(window.innerWidth);
  return <div>Hello, world!</div>;
};

export default MyComponent;

이 코드를 실행하면, 새로운 window 객체가 생성되며, 브라우저 창의 너비를 출력합니다.

이는 전역 스코프의 window 객체와는 별개로 동작합니다.