나의 React 여정: 11일차-JS 튜토리얼-php.cn

나의 React 여정: 11일차

Linda Hamilton

풀어 주다： 2024-12-09 05:30:18

원래의

1003명이 탐색했습니다.

My React Journey: Day 11

오늘 배운 내용
모듈은 JavaScript의 판도를 바꾸는 요소입니다. 이를 통해 코드를 더 작고 재사용 가능한 덩어리로 나눌 수 있으므로 프로젝트를 더 쉽게 관리, 디버그 및 최적화할 수 있습니다. 분석 내용은 다음과 같습니다.

모듈이란 무엇입니까?

모듈을 사용하면 파일 전체에서 코드를 재사용하고 구성할 수 있습니다.
모듈 이전: JavaScript 코드가 한 페이지에 작성되어 디버깅이나 유지 관리가 어려운 무겁고 복잡한 파일이 생겼습니다.
모듈 사용: 코드를 더 작고 관리 가능한 파일로 나눌 수 있습니다.

주요 개념

내보내기 및 가져오기

내보내기: 다른 곳에서 사용할 수 있도록 모듈을 보냅니다.
가져오기: 다른 파일에서 모듈을 가져와서 사용합니다.

구문:

명명된 내보내기/가져오기: 이름별로 여러 항목을 내보냅니다. 동일한 이름을 사용하여 가져와야 합니다.

// Export
export const greet = () => console.log("Hello!");
export const add = (a, b) => a + b;

// Import
import { greet, add } from "./module.js";
greet(); // Output: Hello!
console.log(add(2, 3)); // Output: 5

로그인 후 복사

기본 내보내기/가져오기:

단일 기본 항목을 내보냅니다. 가져오는 동안 이름을 바꿀 수 있습니다.

// Export
export default function greet() {
    console.log("Hello, default export!");
}

// Import
import hello from "./module.js";
hello(); // Output: Hello, default export!

로그인 후 복사

주요 차이점:

이름이 지정된 내보내기: 가져오기 이름이 일치해야 합니다.
기본 내보내기: 가져오기 이름이 다를 수 있습니다.

2.모듈 별칭

왜 사용해야 할까요? 내보내기 이름이 동일한 여러 파일에서 가져올 때 앨리어싱을 사용하면 충돌을 방지할 수 있습니다.
구문:

import { sum as add } from "./math.js";
console.log(add(2, 3)); // Output: 5

로그인 후 복사

3.네임스페이스 가져오기(*)

모듈의 모든 항목을 단일 개체로 가져오려면 *를 사용하세요.
구문:

import * as math from "./math.js";
console.log(math.sum(2, 3)); // Output: 5
console.log(math.sub(5, 2)); // Output: 3

로그인 후 복사

4.내보내기 결합

여러 모듈의 내보내기를 하나로 병합합니다.

단계:

모듈을 개별적으로 내보냅니다.
내보내기 *를 사용하여 결합할 새 파일을 만듭니다.
결합된 파일을 프로젝트로 가져옵니다. 예:

// Module 1: calc.js
export const add = (a, b) => a + b;
export const sub = (a, b) => a - b;

// Module 2: identity.js
export const name = "JavaScript";

// Combine Modules
export * as calc from "./calc.js";
export * as identity from "./identity.js";

// Import Combined
import * as modules from "./combine.js";
console.log(modules.calc.add(5, 3)); // Output: 8
console.log(modules.identity.name); // Output: JavaScript

로그인 후 복사

모듈 사용의 이점