Project Structure

Default Export

거의 통상적으로
src 폴더 내부에
/components/conponentName.jsx
/screens/componentName.jsx
이런 식으로 컴포넌트를 구분해서 만든다.

component를 불러올때 해당 폴더 명으로 불러오면 index.jsx를 인식하여 가져온다.

ex)
App.js

import Navbar from './tutorial/04-project-structure/starter/Navbar';

function App() {
  return (
    <div className='container'>
      <Navbar/>
    </div>
  );
}

export default App;

Navbar/index.jsx

import React from 'react'

function Navbar() {
  return (
    <div>Navbar</div>
  )
}

export default Navbar

또는 index.jsx에

export { default } from './Navbar';

이렇게 넣어둔다면 Navbar 컴포넌트가 default로 들어가 App.jsx에서는 Navbar.jsx 가 렌더링되어진다.

Named Exports

파일이 많은 경우 유용하게 사용할 수 있다.

기본적으로 import 해주기 위해서는 각각의 컴포넌트 불러와야한다.

import Home from './tutorial/04-project-structure/starter/Pages/Home';
import About from './tutorial/04-project-structure/starter/Pages/About';

하지만 컴토넌트 폴더에 index.jsx 파일을 설정하여 한번의 import구문으로 여러 컴포넌트를 가져올 수 있다.

Pages/index.jsx

import Home from "./Home";
import About from "./About";
export { Home, About };

App.jsx

import {Home, About} from './tutorial/04-project-structure/starter/Pages';

Exports Group

파일이 많은 경우 유용하게 사용할 수 있다.

import React from 'react'
import FirstComponent from './FirstComponent';
import SecondComponent from './SecondComponent';

function Example() {
  return (
    <div>
        <h2>Example</h2>
        <FirstComponent/>
        <SecondComponent/>
    </div>
  )
}

export default Example;

index.jsx 파일에 모두 렌더랑하여 App.jsx에서 index.jsx만 import하여 모든 컴포넌트가 렌더링 가능하도록 할 수 있다.