\'기본 xx 내보내기\'와 \'{xx를 기본값으로}\' 내보내기의 차이점-JS 튜토리얼-php.cn

\'기본 xx 내보내기\'와 \'{xx를 기본값으로}\' 내보내기의 차이점

WBOY

풀어 주다： 2024-08-05 15:03:26

원래의

370명이 탐색했습니다.

The Differences Between

JavaScript 모듈의 기본

모듈은 다른 모듈에서 가져와 사용할 수 있는 독립적인 코드 조각입니다. 이는 개발자가 코드를 체계적이고 유지 관리 가능하며 이해하기 쉽게 유지하는 데 도움이 됩니다.

모듈 작업을 하려면 가져오기 및 내보내기 구문을 이해해야 합니다. 간단히 요약하자면 다음과 같습니다.

import: 다른 모듈에서 명명된 내보내기 또는 기본 내보내기를 가져오는 데 사용됩니다.
내보내기: 모듈에서 값, 함수 또는 클래스를 내보내 다른 모듈에서 가져올 수 있도록 하는 데 사용됩니다.

내보내기에는 두 가지 유형이 있습니다.

이름이 지정된 내보내기: 모듈에 이름이 지정된 내보내기가 여러 개 있을 수 있습니다. 이름을 사용하여 명시적으로 가져옵니다.
기본 내보내기: 각 모듈에는 기본 내보내기가 하나만 있을 수 있습니다. 이름을 지정하지 않고 가져옵니다.

내보내기 동작 {xxx as default }

JavaScript에서 가져오기는 값이 아닌 라이브 바인딩 또는 참조입니다. 즉, 다른 모듈에서 변수를 가져올 때 해당 변수의 값 복사본이 아닌 해당 변수에 대한 참조를 가져오는 것입니다.

다음 예를 고려해보세요.

// math.js
let value = 1;

setTimeout(() => {
  value = 888;
}, 500);

export { value as default };

// app.js
import value from './math.js';

setTimeout(() => {
  console.log(value); // ?
}, 1000);

로그인 후 복사

이 경우 어떤 값이 출력되는지 추측해 보세요.

답은 1이 아닌 888입니다. 수출은 수출 참조이기 때문입니다.

내보내기 기본값 xxx의 동작

기본 내보내기 구문은 모듈에서 기본값을 내보내는 데 사용됩니다. 단, 내보내기 기본값을 사용하면 라이브 참조가 아닌 현재 값이 내보내집니다.

// math.js
let value = 1;

setTimeout(() => {
  value = 888;
}, 500);

export default value;

// app.js
import value from './math.js';

setTimeout(() => {
  console.log(value); // 1
}, 1000);

로그인 후 복사

이 경우 math.js의 value 변수가 변경되더라도 app.js의 value 변수는 변경되지 않습니다. 이는 값이 실시간 참조가 아닌 가져오기 시 현재 값을 보유하기 때문입니다.

참조 데이터 유형 내보내기

보시다시피 앞서 원시 데이터 유형을 내보냈는데 참조 데이터 유형을 내보낸다면 어떨까요?

// math.js
const value = {
  current: 1,
};

setTimeout(() => {
  value.current = 888;
}, 500);

export default value;
// OR
// export { value as default };

// app.js
import value from './math.js';

setTimeout(() => {
  console.log(value.current);
}, 1000);

로그인 후 복사

보시다시피 참조 데이터 유형을 처리할 때 기본 xxx 내보내기와 { xxx를 기본값으로 } 내보내기 사이에는 차이가 없습니다. JavaScript에서는 항상 참조 유형이며 내보낼 때 깊게 복사되지 않는다는 것을 이해할 수 있습니다.

모범 사례 및 권장 사항

기본 xxx 내보내기와 { xxx as default } 내보내기는 모두 기본값을 내보내는 데 사용할 수 있지만 특정 시나리오에서는 동작이 다릅니다. 올바른 구문을 선택하는 데 도움이 되는 몇 가지 권장 사항은 다음과 같습니다.

문자열이나 숫자 등의 값을 내보내고 라이브 바인딩이 필요하지 않은 경우 내보내기 기본 xxx를 사용하세요.
라이브 바인딩이 필요한 경우, 특히 내보낸 값이 시간이 지남에 따라 변경될 수 있는 경우 내보내기 { xxx as default }를 사용하세요(권장하지 않음).
참조 데이터 유형의 경우 항상 참조를 내보내므로 두 구문 중 하나를 사용할 수 있습니다.
관련 제안: 코드 가독성과 유지 관리성을 위해 기본 내보내기 대신 명명된 내보내기를 사용하는 것이 권장되는 이유는 다음과 같습니다.