"파일끼리 어떻게 연결하지? 자바스크립트 import / export 쉽게 배우기"

얘 코드 좀 써도 될까? export해서 import하는 자바스크립트의 세계

 

 

 

▶export : 다른 파일에서 사용할 수 있도록 코드 조각을 외부로 내보내는 기능.

▶import : 다른 파일에서 export 된 내용을 불러오는 기능.

 

♨ 사용 이유 : 모듈화(Modularization) 를 통해 코드 재사용성과 유지보수성을 높이기 위함.

 

▶명령어 문법

 

▷ export 문법

// 개별(export) 방식
export const name = "Sojeong";
export function greet() { ... }

// 한 번에 export
const age = 25;
function sayHi() { ... }
export { age, sayHi };

// default export
export default function main() { ... }

 

▷ import 문법

// 개별 import
import { name, greet } from './module.js';

// 별칭(alias) 사용
import { greet as hello } from './module.js';

// default import
import main from './module.js';

// default + 개별 import
import main, { name, greet } from './module.js';

 

 

※ 파라미터는 어떤게 들어갈 수 있을까?

▪ export :

|| 변수, 함수, 클래스, 객체, 배열 등 내보낼 값들

 

▪ import :

|| export한 이름 그대로 또는 alias(별칭) 사용 가능 

|| 경로: './파일경로.js', '../경로/모듈.js' 등

 

▶  주로 어떻게 사용될까?

 

• 파일을 기능별로 나누어 작성할 때
• 라이브러리, 유틸 함수, 설정값 등을 모듈로 분리할 때
• 프레임워크(React, Vue 등)에서 컴포넌트 관리할 때
• 외부 패키지를 사용할 때 (import React from 'react';)

▶  예시

☞ utils/math.js

// export
export function add(a, b) {
  return a + b;
}

export const PI = 3.14;

 

☞ main.js

 

// import
import { add, PI } from './utils/math.js';

console.log(add(2, 3)); // 5
console.log(PI); // 3.14

 

☞ greet.js

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

 

☞ app.js

import greet from './greet.js';

console.log(greet("Sojeong")); // Hello, Sojeong!

 

 

♨ point! 

🔹 export default란?

default는 "기본으로 내보낸다"는 의미로, 한 모듈(파일)에서 하나의 값만 default로 지정할 수 있음.

 

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

 

이렇게 내보낸 default 값은 가져올 때 중괄호 없이 아무 이름으로나 import 가능:

 

// app.js
import greetUser from './greet.js';

console.log(greetUser("소정"));  // Hello, 소정

 

 

🔹 특징 정리

 

🔹 예시 비교

🔸 default export

// math.js
export default function add(a, b) {
  return a + b;
}

// main.js
import addFunction from './math.js'; // 이름 마음대로 가능

 

🔸 named export

// math.js
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }

// main.js
import { add, sub } from './math.js'; // 이름 일치해야 함

 

👉 default는 그 파일의 대표값을 정해서, 다른 곳에서 중괄호 없이 편하게 가져올 수 있게 해주는 기능