[React] 특정 상황에서, data import 하기

💡 불러들이는 data의 사이즈가 클 때, 혹은 데이터가 항상 필요한 게 아니라 특정 상황에서만 필요할 때는 그 순간에서만 data를 받아 오는 것이 좋다.

✍🏻 일반적인 import 하는 방법

import logo from './logo.svg';
import './App.css';
import data from './data.json';

제일 상단에, 들고 오려는 data 파일의 경로를 import 를 사용하여 불러들인다.

✨ 필요한 순간에 data를 import 하는 방법

import logo from './logo.svg';
import './App.css';


function App() {
	
  // button을 클릭 할 때, data를 불러들인다.
  const onClick = () => {
    import('./data.json')
      .then(({ default : data }) => {
        console.log({ data });
      });
  }

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={onClick}> 데이터 부르기 ! </button>
      </header>
    </div>
  );
}

export default App;