import / export

1. import

기본 내보내기 이름 내보내기를 포함한 모든 모듈을 가져온다.

import * as React from 'react'

모듈에서 하나의 컴포넌트만 가져온다.

import { myMember } from "my-module.js";

기본 내보내기로 가져온다.

import React from 'react'

HashRouter을 Router로 별칭 등록 하여 사용한다.

import { HashRouter as Router } from 'react-router-dom'

2. export

Child는 기본으로 내보내고 ContainerChild는 이름 내보내기한다.

export { Child as default, ContainerChild };

default로 내보낸 Home을 names로 내보낸다.

export { default as Home } from './home'

names로 내보내 것 중에 Home을 default로 내보낸다.

export { Home as default } from './'

Link.js

// src/components/Link/index.js
 
import React from 'react'

const Link = () => {
  return <button type="button"></button>
}

export default Link

index.js

// src/components/index.js

export { default as Link } from './Link'

App.js

// src/App/App.js

import { Link } from '../components'

function App() {
  return (
    <div className="App">
      <Link />
    </div>
  )
}

export default App

2.1 컴포넌트

export const App = () => { ... }

export default function App() { ... }

class App extends React.Component { ... }

export default App