모듈 방식과 컴포넌트 방식의 차이

 

모듈 방식

모듈 방식은 코드를 독립적인 단위로 분리하고 조직하는 방법입니다.
모듈은 일련의 관련된 코드를 포함하며, 기능이나 역할에 따라 구성됩니다.
모듈은 자체적인 스코프를 가지며, 해당 스코프 내에서 정의된 변수, 함수, 클래스 등이 

해당 모듈 내부에서만 접근 가능합니다.
모듈은 다른 모듈로부터 import하여 사용할 수 있으며, 모듈 간의 의존성을 관리할 수 있습니다.
각 모듈은 독립적으로 테스트, 유지보수 및 재사용이 가능합니다.

 

모듈 방식 예제 코드

// math.js 모듈

// 두 수를 더하는 함수
export function add(a, b) {
  return a + b;
}

// 두 수를 곱하는 함수
export function multiply(a, b) {
  return a * b;
}

 

위의 코드는 math.js라는 모듈을 정의하는 예제입니다. 이 모듈은 두 개의 함수 add와 multiply를 내보냅니다. 

각 함수는 두 수를 더하거나 곱하는 간단한 연산을 수행합니다. 이 모듈은 다른 파일에서 import하여 사용할 수 있습니다.

 

 

---

 

컴포넌트 방식

컴포넌트 방식은 사용자 인터페이스(UI)를 구성하는 데 사용되는 독립적인 코드 조각입니다.
컴포넌트는 UI의 일부분을 캡슐화하고 재사용 가능한 단위로 만듭니다.
컴포넌트는 일반적으로 UI 요소와 해당 요소와 상호작용하는 로직을 포함합니다.
컴포넌트는 다른 컴포넌트에서 사용될 수 있으며, 컴포넌트 간에 데이터를 전달하고 상태를 관리할 수 있습니다.
컴포넌트 방식은 UI를 모듈화하여 코드의 재사용성, 유지보수성 및 개발 생산성을 향상시킵니다.
컴포넌트 기반 프레임워크(예: Svelte, React, Vue)는 컴포넌트 방식을 기반으로 UI를 구축하는 데 도움을 줍니다.

 

컴포넌트 방식 예제 코드

<!-- Counter.svelte 컴포넌트 -->

<script>
  let count = 0;

  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  Clicked {count} times
</button>

 

위의 코드는 Counter.svelte라는 컴포넌트를 정의하는 예제입니다. 

이 컴포넌트는 클릭 횟수를 세는 기능을 가지고 있습니다. 

컴포넌트 내에는 count라는 상태 변수와 increment라는 함수가 정의되어 있습니다. 

버튼 클릭 시 increment 함수가 실행되며, count 변수의 값을 1씩 증가시킵니다. 

이렇게 정의된 컴포넌트는 다른 컴포넌트에서 사용될 수 있습니다.

 

---

따라서, 모듈 방식은 코드를 일반적인 기능 또는 역할에 따라 분리하여 조직하는 방법이며,

컴포넌트 방식은 UI의 일부를 캡슐화하여 재사용 가능한 단위로 만들어 UI를 구성하는 방법을 보여줍니다.

 

모듈 방식은 함수나 변수 등의 기능을 모듈로 정의하고 import하여 코드의 재사용성과 유지보수성을 개선하고, 

컴포넌트 방식은 UI와 관련된 기능을 컴포넌트로 정의하여 재사용하고 조합하여 

UI의 재사용성과 개발 생산성을 향상시킵니다.