JavaScript 모듈은 한번만 실행된다.

JavaScript 모듈 시스템은 웹 개발에서 효율성과 일관성을 높이는 중요한 기능입니다. 여러 <script> 태그에서 동일한 모듈을 참조하더라도, 모듈은 단 한 번만 실행됩니다.

위 내용은 Javascript Modules(for mdn)에 있는 설명입니다. 하지만.. 놀랍게도 한국어로 번역하면 해당 내용이 사라진답니다.. 궁금하신 분들은 영어 원문으로 확인하시면 아래와 같이 확인할 수 있습니다.

Modules are only executed once, even if they have been referenced in multiple <script> tags.

이는 모듈의 성능을 최적화하고, 일관성을 유지하는 중요한 원칙입니다. 이번 포스팅에서는 이 원리를 다양한 예제와 함께 설명하고, React 환경에서 이 원리를 어떻게 적용할 수 있는지 알아보겠습니다.

모듈의 단 한 번 실행 원리

JavaScript 모듈은 처음 로드된 후 캐싱됩니다. 동일한 모듈을 다시 참조하면, 이미 캐싱된 모듈이 재사용되며, 추가 실행은 발생하지 않습니다. 이 원리는 성능과 메모리 효율성을 크게 향상시킵니다.

예제 1: 모듈의 단 한 번 실행 확인하기

먼저, 간단한 모듈과 이를 여러 곳에서 참조하는 HTML 파일을 만들어보겠습니다.

module.js:


console.log('Module is being executed');

export function greet() {
  return 'Hello from the module!';
}

index.html:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Module Execution Example</title>
</head>
<body>
  <script type="module" src="module.js"></script>
  <script type="module">
    import { greet } from './module.js';
    console.log(greet());
  </script>
  <script type="module">
    import { greet } from './module.js';
    console.log(greet());
  </script>
</body>
</html>

위 예제를 실행하면, "Module is being executed" 메시지가 단 한 번만 출력됩니다. 모듈은 처음 로드된 후 캐싱되며, 이후 동일한 모듈을 참조하더라도 추가 실행이 발생하지 않습니다.

예제 2: 모듈 수정과 재사용

이번에는 모듈을 수정해보는 상황을 고려해 보겠습니다. 모듈의 캐싱으로 인해 동일한 모듈을 여러 번 참조해도 단 한 번만 실행된다는 원칙이 적용되지만, 모듈의 상태를 변경할 경우 그 결과는 어떻게 될까요?

module.js:


let counter = 0;

export function increment() {
  counter += 1;
  return counter;
}

index.html:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Module State Example</title>
</head>
<body>
  <script type="module">
    import { increment } from './module.js';
    console.log(increment()); // 1
  </script>
  <script type="module">
    import { increment } from './module.js';
    console.log(increment()); // 2
  </script>
</body>
</html>

여기서 increment 함수는 모듈의 상태(counter)를 변경합니다. 이 상태는 모듈이 캐싱된 후에도 유지되므로, 두 번째 스크립트에서 increment 함수를 호출하면 counter 값은 2로 증가합니다. 모듈의 상태가 전역적으로 공유되는 것을 확인할 수 있습니다.

React에서 모듈의 단 한 번 실행 적용하기

React 애플리케이션에서도 모듈의 단 한 번 실행 원칙이 동일하게 적용됩니다. React에서는 컴포넌트가 여러 번 렌더링되더라도, 모듈이 단 한 번만 실행되고 상태가 유지됩니다.

counter.js:


let counter = 0;

export function incrementCounter() {
  counter += 1;
  return counter;
}

App.js:


import React from 'react';
import { incrementCounter } from './counter';

function App() {
  return (
    <div>
      <h1>Counter: {incrementCounter()}</h1>
      <button onClick={() => alert(`Counter value: ${incrementCounter()}`)}>
        Show Counter
      </button>
    </div>
  );
}

export default App;

결과: incrementCounter 함수는 단 한 번만 실행되고, 상태(counter)는 공유됩니다. 버튼을 클릭할 때마다 증가된 카운터 값이 표시됩니다.

React에서 모듈 수정에 따른 동작

React에서 모듈의 상태를 변경할 때도 마찬가지로 모듈이 단 한 번만 실행된다는 원칙이 적용됩니다. 이는 여러 컴포넌트에서 동일한 모듈을 참조할 때 특히 유용합니다.

counter.js:


let counter = 0;

export function incrementCounter() {
  counter += 1;
  return counter;
}

export function getCounter() {
  return counter;
}

ComponentA.js:


import React from 'react';
import { incrementCounter } from './counter';

function ComponentA() {
  return (
    <div>
      <h2>Component A: {incrementCounter()}</h2>
    </div>
  );
}

export default ComponentA;

ComponentB.js:


import React from 'react';
import { getCounter } from './counter';

function ComponentB() {
  return (
    <div>
      <h2>Component B: {getCounter()}</h2>
    </div>
  );
}

export default ComponentB;

App.js:


import React from 'react';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

function App() {
  return (
    <div>
      <ComponentA />
      <ComponentB />
    </div>
  );
}

export default App;

결과: ComponentA가 incrementCounter를 호출하여 카운터 값을 증가시키면, ComponentB에서도 변경된 값을 확인할 수 있습니다. 이는 모듈이 단 한 번만 실행되고, 상태가 전역적으로 유지되기 때문입니다.

JavaScript 모듈은 성능 최적화와 코드 일관성을 유지하기 위해 여러 곳에서 참조되더라도 단 한 번만 실행됩니다.

이 원리는 웹 애플리케이션의 효율성을 크게 향상시키며, React 같은 프레임워크에서도 중요한 역할을 합니다.

모듈의 상태를 공유하거나, 복잡한 애플리케이션에서 모듈을 재사용할 때 이 원리를 잘 활용하면, 더욱 견고하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.

실제 코드에서 예를 든다면, React-Query의 new QueryClient() 생성자를 한번만 실행하고, 그 모듈을 모든곳에서 import 받는다면 같은 queryClient를 사용한다는 것입니다. 어떤가요? 놀랍지 않나요?

앞으로는 MDN문서를 한국어로만 보지 말고.. 영어 원문으로도 확인을 해봐야 디테일 하나하나 놓치지 않을 것 같다는 생각이 드는 하루였습니다.. 긴 글 읽어주셔서 감사합니다!