소개

ES6(ECMAScript 2015)는 JavaScript에 표준화된 모듈 시스템을 도입하여 코드 구성 및 공유 방식에 혁명을 일으켰습니다. 이 기사에서는 ES6 가져오기의 모든 것을 살펴보고 실제 사례와 데모 프로젝트를 통해 ES6 가져오기의 강력함과 유연성을 보여드리겠습니다.

목차

1. 기본 가져오기 구문
2. 지명 수출 및 수입품
3. 기본 내보내기 및 가져오기
4. 이름이 지정된 내보내기와 기본 내보내기 혼합
5. 가져오기 이름 바꾸기
6. 모든 내보내기를 개체로 가져오기
7. 동적 가져오기
8. 실제 사례
9. 데모 프로젝트: 작업 관리자
10. 모범 사례 및 팁
11. 결론

기본 가져오기 구문

ES6에서 가져오기 위한 기본 구문은 다음과 같습니다.

import { something } from './module-file.js';

이것은 동일한 디렉토리에 있는 module-file.js 파일에서 이름이 지정된 내보내기를 가져옵니다.

명명된 수출 및 수입품

이름이 지정된 내보내기를 사용하면 모듈에서 여러 값을 내보낼 수 있습니다.

// math.js
export const add = (a, b) => a   b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math.js';

console.log(add(5, 3));      // Output: 8
console.log(subtract(10, 4)); // Output: 6

기본 내보내기 및 가져오기

기본 내보내기는 모듈에 대한 기본 내보내기 값을 제공합니다.

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

// main.js
import greet from './greet.js';

console.log(greet('Alice')); // Output: Hello, Alice!

명명된 내보내기와 기본 내보내기 혼합

이름이 지정된 내보내기와 기본 내보내기를 단일 모듈에 결합할 수 있습니다.

// utils.js
export const VERSION = '1.0.0';
export function helper() { /* ... */ }

export default class MainUtil { /* ... */ }

// main.js
import MainUtil, { VERSION, helper } from './utils.js';

console.log(VERSION);  // Output: 1.0.0
const util = new MainUtil();
helper();

가져오기 이름 바꾸기

이름 충돌을 피하기 위해 가져오기 이름을 바꿀 수 있습니다.

// module.js
export const someFunction = () => { /* ... */ };

// main.js
import { someFunction as myFunction } from './module.js';

myFunction();

모든 내보내기를 개체로 가져오기

모듈의 모든 내보내기를 단일 개체로 가져올 수 있습니다.

// module.js
export const a = 1;
export const b = 2;
export function c() { /* ... */ }

// main.js
import * as myModule from './module.js';

console.log(myModule.a);  // Output: 1
console.log(myModule.b);  // Output: 2
myModule.c();

동적 가져오기

동적 가져오기를 사용하면 필요에 따라 모듈을 로드할 수 있습니다.

async function loadModule() {
  const module = await import('./dynamicModule.js');
  module.doSomething();
}

loadModule();

실제 사례

1. React 구성요소:

// Button.js
import React from 'react';

export default function Button({ text, onClick }) {
  return {text};
}

// App.js
import React from 'react';
import Button from './Button';

function App() {
  return  alert('Clicked!')} />;
}

1. Node.js 모듈:

// database.js
import mongoose from 'mongoose';

export async function connect() {
  await mongoose.connect('mongodb://localhost:27017/myapp');
}

// server.js
import express from 'express';
import { connect } from './database.js';

const app = express();

connect().then(() => {
  app.listen(3000, () => console.log('Server running'));
});

데모 프로젝트: 작업 관리자

ES6 가져오기가 실제로 작동하는 모습을 보여주기 위해 간단한 작업 관리자를 만들어 보겠습니다.

// task.js
export class Task {
  constructor(id, title, completed = false) {
    this.id = id;
    this.title = title;
    this.completed = completed;
  }

  toggle() {
    this.completed = !this.completed;
  }
}

// taskManager.js
import { Task } from './task.js';

export class TaskManager {
  constructor() {
    this.tasks = [];
  }

  addTask(title) {
    const id = this.tasks.length   1;
    const task = new Task(id, title);
    this.tasks.push(task);
    return task;
  }

  toggleTask(id) {
    const task = this.tasks.find(t => t.id === id);
    if (task) {
      task.toggle();
    }
  }

  getTasks() {
    return this.tasks;
  }
}

// app.js
import { TaskManager } from './taskManager.js';

const manager = new TaskManager();

manager.addTask('Learn ES6 imports');
manager.addTask('Build a demo project');

console.log(manager.getTasks());

manager.toggleTask(1);

console.log(manager.getTasks());

이 데모를 실행하려면 ES6 모듈을 지원하는 JavaScript 환경(예: --experimental-modules 플래그가 있는 Node.js 또는 webpack 또는 Rollup과 같은 번들러가 있는 최신 브라우저)을 사용해야 합니다.

모범 사례 및 팁

1. 여러 함수/값에 대해 명명된 내보내기를 사용하고, 주요 기능에 대해 기본 내보내기를 사용합니다.
2. 모듈을 단일 목적으로 집중적으로 유지하세요.
3. 파일 및 내보내기에 일관된 명명 규칙을 사용합니다.
4. 모듈 간의 순환 종속성을 피하세요.
5. 브라우저 기반 프로젝트에는 webpack이나 Rollup과 같은 번들러 사용을 고려해보세요.
6. 대규모 애플리케이션에서 코드 분할 및 성능 최적화를 위해 동적 가져오기를 사용합니다.

결론

ES6 가져오기는 JavaScript 코드를 구성하는 강력하고 유연한 방법을 제공합니다. 다양한 가져오기 및 내보내기 구문을 이해하면 보다 모듈화되고 유지 관리가 가능하며 효율적인 애플리케이션을 만들 수 있습니다. 여기에 제공된 데모 프로젝트와 실제 사례는 자신의 프로젝트에서 ES6 가져오기를 사용하기 위한 견고한 기반을 제공합니다.

모듈과 가져오기를 구성하는 방법을 결정할 때 항상 프로젝트의 특정 요구 사항을 고려하는 것을 기억하세요. 즐거운 코딩하세요!