React_ES6 모듈로 파일 분리하여 코드 클린하게 하기

React

ES6 Module

• named : importing name should be same
• default : you can customise importing name

1. named import

// src/books.js

export const books = [
  {
    author: 'Charles Dickens',
    title: 'Interesting Topics',
    img: './images/book-1.jpg',
    id: 1,
  },
  {
    author: 'Laura Dave',
    title: 'The Last Thing He Told Me',
    img: './images/book-2.jpg',
    id: 2,
  },
];

// src/index.js

// name export
// : function name to import should be same
import { books } from './books';

2. default import

// src/books.js

const books = [
  {
    author: 'Charles Dickens',
    title: 'Interesting Topics',
    img: './images/book-1.jpg',
    id: 1,
  },
  {
    author: 'Laura Dave',
    title: 'The Last Thing He Told Me',
    img: './images/book-2.jpg',
    id: 2,
  },
];

// only one default function available per one file
export default books;

// src/index.js

// name export
// : function name to import should be same
// import books from './books';
import listOfBook from './books';

books 뿐만 아니라 다른 이름 listOfBook으로도 import할 수 있다. 왜냐하면 한 파일당 하나씩 default export하기 때문이다.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

// data
import books from './books';

// components
import Book from './Book';

const BookList = () => {
  return (
    <section className='booklist'>
      {books.map((book) => {
        return <Book {...book} key={book.id} />;
      })}
    </section>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<BookList />);

데이터와 컴포넌트들을 따로 나누니 index.js가 깔끔해졌다.