저는 최근에 cli 또는 스타터 템플릿을 사용하여 프로젝트를 시작하고 있으며 제가 주목한 것 중 하나는 우리가 당연하게 여기는 코드 조각이 얼마나 많이 포함되어 있는지입니다.

내 관심을 끈 첫 번째 스니펫 중 하나는 새 React 프로젝트를 생성할 때 App 구성 요소를 내보내는 코드 줄이었습니다.

class App extends Component {
  render() {
    return (
      <h1>This is my application.</h1>
    )
  }
}

export default App

그래서 이 기회를 빌어 짧지만 강력한 코드 조각을 살펴보고 무슨 일이 일어나고 있고 왜 존재하는지 분석하고 싶습니다.

ES6 모듈

ECMAScript는 ES6에서 모듈 개념을 도입했습니다.

모듈은 독립적인 코드 단위입니다. 해당 코드는 export 를 사용하여 자산을 다른 모듈에 노출할 수 있습니다. import를 사용하여 다른 모듈의 자산을 사용할 수도 있습니다.

위의 코드는 React가 이 개념을 사용하여 구성 요소에서 구성 요소로 물건을 전달하는 방법의 예입니다.

ES6 사양이 약간 다르기 때문에 이를 염두에 두는 것이 중요합니다.

한 번에 한 단계 씩

이 코드 줄만 살펴보겠습니다.

export default App

먼저 export 키워드가 콘텐츠를 다른 모듈에 노출하고 있습니다.

다음으로 default 가 있습니다.

기본값은 ES6에서 사용할 수 있는 내보내기 유형 중 하나입니다. 기본 키워드를 사용하면 이 모듈을 가져오고 모듈에서 가져올 항목을 지정하지 않으면 이 모듈을 얻게 됩니다! 주어진 모듈에 대해 하나의 기본 내보내기만 가질 수 있습니다.

마지막으로 내보내는 자산의 이름이 있습니다. 이 경우에는 App 입니다.

좋아, 이제 사용하자

App를 내보내므로 import 다른 모듈에서 사용할 수 있습니다.

import App from "./App"

이 정확한 코드 라인은 React 프로젝트를 생성할 때 index.js에 나타납니다.

위 구문을 사용하여 기본 내보내기를 가져옵니다. 흥미로운 점은 여기서 App가 단지 이름 할당이라는 것입니다. 이 진술은 실제로 .App에서 자산을 지정하지 않았으므로 기본적으로 내보낸 자산을 선택하고 참조용으로 이름을 지정하겠습니다.

결과적으로 이름App을 전혀 지정할 필요가 없는 것으로 나타났습니다. 이름 할당일 뿐입니다.

import Whatever from "./App"

이 경우 Whatever는 여전히 앱 구성 요소입니다! 그리고 우리는 그것을 사용할 수 있습니다.

ReactDOM.render(<Whatever />, document.getElementById('root'));

누락된 기본값, 일명 명명된 가져오기

여러 자산 또는 기본 자산이 아닌 자산을 내보내는 것은 어떻습니까? 어떻게 생겼나요?

export class App extends Component {
  render() {
    return (
      <h1>This is my application.</h1>
    )
  }
}

위는 기본 키워드를 사용하지 않고 내보낸 동일한 앱 자산의 예입니다.

이것은 작동하지만 같은 방식으로 가져올 수는 없습니다. 내가 이것을하려고하면

import App from "./App"

그것은 나에게이 오류를 제공합니다



내 수입 명세서는 해당 이름App에 무엇을 할당하는지 알지 못합니다!

기본 내보내기가 없으면 가져오려는 항목의 이름을 명시적으로 지정해야 합니다. 이것이 ES6에서 명명된 가져오기라고 하는 이유입니다.

import {App} from "./App"

이것은 Destructuring 할당과 매우 흡사합니다! 빌드 시간과 런타임은 기술적으로 다르지만 구문을 기억하는 데 도움이 되는 방법입니다. 따라서 이 문장은 전체.App 모듈 내부를 살펴보라는 의미입니다. 해당 모듈 내부에 App라는 내보낸 자산이 필요합니다.

나에게 모든 것을 제공!

단일 모듈에서 여러 자산을 내보낼 수 있으므로 한 번에 둘 이상을 가져올 수 있어야 합니다. 이름만 알면 가능합니다.

import {App, Dev, Post} from "./App"

또한 단일 모듈에서 기본 및 명명된 내보내기를 모두 포함하고 함께 가져올 수 있습니다. App가 여전히 기본 내보내기라고 가정해 보겠습니다.

import App, {Dev, Post} from "./App"

짜잔!

나쁘지 않아

일단 분해하면 매우 복잡하지 않습니다. 그러나 너무 자주 우리는 이해하는 데 시간을 들이지 않고 프레임워크 및 프로젝트 내부에서 사용하지 않는 코드 줄을 봅니다. 눈에 보이는 모든 것을 호기심을 가지고 탐험해 보시기 바랍니다! 그것은 당신을 더 나은 프로그래머로 만들 것입니다.