特定の状況でのデータのインポート

2234 ワード
React テキストリンク
💡 ロードされたデータのサイズが大きい場合、またはデータが必ずしも必要ではない場合、特定の状況で必要とされる場合にのみ、その瞬間だけデータを受信することが望ましい.

✍🏻 一般的なインポート方法

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

제일 상단에, 들고 오려는 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;
FileZillaの転送スピードをあげる
[白俊]B 5-5554