개시하다

이번에 나는 import과 export(default) ES2015(ES6)에 관한 문법을 쓸 것이다.

시리즈

이 기사는 리액트 기초 강좌를 위해 연재된 것이다.마음에 드는 사람을 위해 지난 장은 다음과 같다.
React Component 소개 - Qiita
첫 문장은 다음과 같다.
JSX의 내용을 React로 렌더링(create-react-app)(React 기초 강좌 1)-Qita

import, export

지금까지 여러 번 썼다.이하.

import React from "react";
import { render } from "react-dom";

다른 파일에서 JS 모듈을 읽는 구문입니다.

써보세요.

sample.js에 정의된 문자열은 create-react-app에 만들어진 src/ 바로 아래의 같은 층index.js에 표시될 스크립트입니다.
sample.js

export const file = "declared from sample.js";

index.js

import { file } from "./sample";
console.log(file);

콘솔을 사용하면 다음과 같은 정보를 토로할 수 있다.

declared from sample.js 

이렇게 되면 변수의 import, export가 완성됩니다.물론 변수뿐만 아니라 함수와React.Component도 import,export가 가능하다.
sample.js

import React from "react";

export const file = "declared from sample.js";

export const function_test = () =>
  console.log("declared from function in sample.js");

export const ReactComponent = () => <h1>React Component</h1>;

React.Component 사용 시 React 패키지를 설치해야 합니다.
index.js

import React from "react";
import { render } from "react-dom";

import { file, function_test, ReactComponent } from "./sample";
console.log(file);

function_test();

render(<ReactComponent />, document.getElementById("root"));

콘솔에 다음 내용이 표시됩니다.

declared from sample.js 
declared from function in sample.js 

또한view에 문자열React Component도 덧붙였다고 생각합니다.
이렇게 하면 ES 2015(ES6)에서 import/export를 사용하여 변수, 클래스, React Component 등을 다른 파일로 분할해 관리할 수 있다.

이른바 export

export default와 export는 기본적으로 같은 기능으로 문법의 변주곡의 느낌이다.
그럼에도 불구하고 이런 문법은 작업 현장의 React에서 흔히 볼 수 있는 문법이니 한번 봅시다.

export default를 쓸 때의 문법 규칙

export default한 import시에는 사용하지 않음{}

단일 파일에서 1export default만 사용 가능export

따라서 파일 1 구성 요소의 경우 export default

실제로 써주세요.

sample.js에 정의된 React Component는 create-react-app에 만들어진 src/ 바로 아래의 같은 층index.js에 표시되는 스크립트입니다.sample.js는 두 가지 모델로 쓸 수 있다export default.

1가지 모드

sample.js

import React from "react";

export default class ClassComponent extends React.Component {
  render() {
    return <h1>React Component Export Default した</h1>;
  }
}

두 가지 모드

sample.js

import React from "react";

class ClassComponent extends React.Component {
  render() {
    return <h1>React Component Export Default した</h1>;
  }
}

export default ClassComponent;

index.js의 사용자가 import를 사용할 때 괄호{} 없이 받아들일 수 있다.
index.js

import React from "react";
import { render } from "react-dom";

// {} は使わない
import ReactComponent from "./sample";

render(<ReactComponent />, document.getElementById("root"));

나는 이렇게 하면 드러날 것이라고 생각한다.

이상은 export과import의 문법입니다.

참고 자료

개정 새 JavaScript 정식 입문 ~ 현대적인 스타일을 바탕으로 현장에서의 응용 | 산전상관