js 모듈화

안녕하세요! YB 김정민입니다🙌

이번 주차 과제에서는 TodoList를 만들면서 JavaScript 파일을 기능별로 모듈화하는 연습을 해봤습니다. 평소에는 주로 React로 작업하면서 컴포넌트 단위로 자연스럽게 모듈화가 이뤄졌는데 이번에는 React 없이 순수 JS만으로 모듈화를 해보니 비슷하지만 차이점이 있어 공유해보고자합니다.

---

자바스크립트 모듈화란?

ES6(ES2015)부터 JavaScript는 공식적으로 모듈 시스템을 지원하기 시작했습니다.
각 파일은 하나의 독립적인 모듈로 간주되며, export와 import 키워드를 통해 다른 모듈과 기능을 공유할 수 있습니다.

export function renderTodos(todoList) { // 테이블에 할 일 렌더링 }

 import { renderTodos } from "./render.js"; renderTodos(\[\]);

모듈 사용 시 HTML에서는 이렇게 선언해야 합니다

<script type\="module" src\="js/main.js"\></script\>

장점

• 파일 단위로 책임 분리 가능
• 재사용성과 가독성 향상
• 네임스페이스 충돌 방지
• 트리 쉐이킹(Tree Shaking)을 통한 최적화 가능 (번들러 사용 시)

단점

• 브라우저에서 사용하려면 type="module" 필수
  • (저도 js로 모듈화는 처음이었는데 이 부분 빼먹어서 문제점 찾느라 시간이 좀 걸렸답니다.. )
• 상대 경로와 파일 확장자 신경 써야 함
• 상태 관리, UI 렌더링은 직접 설계해야 함
• 작은 프로젝트에서는 오히려 구조가 복잡해질 수 있음

---

리액트의 모듈화란?

React는 기본적으로 컴포넌트 단위로 파일을 나누는 구조입니다. 각 컴포넌트는 자체적인 UI와 로직을 갖고 있으며, 모듈처럼 import/export를 통해 조립됩니다.

React에서는 파일을 나누는 것 외에도 이 모든 것을 컴포넌트 기반으로 통합해줍니다.

• 상태 관리 (useState, Redux 등)
• 화면 렌더링 (JSX)
• 이벤트 처리 및 데이터 흐름 관

// TodoItem.jsx  
export default function TodoItem({ todo }) {  
  return <li>{todo.text}</li>;  
}

// App.jsx  
import TodoItem from './TodoItem';  

function App() {  
  const todos = \[{ text: '공부하기' }\];  
  return (  
    <ul>  
      {todos.map((todo, idx) => (  
        <TodoItem key={idx} todo={todo} />  
      ))}  
    </ul>  
  );  
}

장점

• 컴포넌트 재사용성이 높아 다양한 화면에 쉽게 활용 가능
• 유지보수 용이성: 각 기능을 개별 파일에서 수정 가능
• 테스트 용이성: 단위 테스트하기 좋은 구조
• 팀 개발 효율성: 컴포넌트 단위로 분업하기 좋음

단점

• 과도한 분리로 오히려 구조가 복잡해질 수 있음
• Props drilling 이슈 발생 가능 (상위에서 하위로 계속 전달)
• 상태 공유 어려움: 전역 상태 관리 도구가 필요할 때 있음

---

 

React는 모듈화 + 상태관리 + 렌더링까지 프레임워크가 도와주는 느낌이라면,

JS는 모듈화만 제공하고 나머진 전부 내가 직접 설계해야 하는 느낌.

React를 쓰다 보면 너무 당연하게 느껴졌던 "자동화된 흐름"이 JS에서는 하나하나 수동으로 연결돼야 한다는 걸 새삼 느꼈습니다.