[react]import / export >> App.js, index.js

참조 : 모듈 내보내고 가져오기
https://ko.javascript.info/import-export
https://ko.javascript.info/modules-dynamic-imports

 

수정전 App.js

import logo from './logo.svg';
import './App.css';
//import React from 'react'; //class App extends React.Component

function App() {

  // return (
  //   <div className="App">
  //     <header className="App-header">
  //       <img src={logo} className="App-logo" alt="logo" />
  //       <p>
  //         Edit <code>src/App.js</code> and save to reload.
  //       </p>
  //       <a
  //         className="App-link"
  //         href="https://reactjs.org"
  //         target="_blank"
  //         rel="noopener noreferrer"
  //       >
  //         Learn React ( Hello !!!)
  //       </a>
  //     </header>
  //   </div>
  // );

  return <h1>Hello World Function Type</h1>
}

// class App extends React.Component{
//   render(){
//     return <h1>Hello World Class Type</h1>;
//   }
// }

export default App;

수정전 :  index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

수정후 App.js

import logo from './logo.svg';
import './App.css';
import React from 'react'; //React.xxx 사용시 필요

//function type coding
// function App() {
//   return (
//     <div className="App">
//       <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>
//           Edit <code>src/App.js</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           Learn React ( Hello World Function Type Start !!!)
//         </a>
//       </header>
//     </div>
//   );
// }

//class Type coding
// class App extends React.Component{
//   render(){
//     return <h1>Hello World Class Type Start!!!</h1>
//   }
// }

////Adjacent JSX elements must be wrapped in an enclosing tag 에러 해결 
//1)<div></div>
//2)<React.Fragment></React.Fragment> 
//3)<></> 

function AppTest(){ //<------------
  return(
    <React.Fragment>
    <h1>Hello World 1111</h1>
    <p>This is my first React component</p>
    </React.Fragment>
  );
}

//export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나타냄
//default를 붙여서 모듈을 내보내면 중괄호 {} 없이 모듈을 가져올 수 있다
//export default App; 
export {AppTest}; //ㅡ-----------------------

수정후 : index.js

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

//export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나타냄
//default를 붙여서 모듈을 내보내면 중괄호 {} 없이 모듈을 가져올 수 있다
//named export 한 모듈을 가져오려면 중괄호가 필요하고, default export 한 모듈을 가져오려면 중괄호가 필요하지 않다
//import App from './App';
import {AppTest} from './App.js'; //<----------------
import reportWebVitals from './reportWebVitals';

//동적으로 모듈 가져오기
// import(modulePath)
//   .then(obj => <모듈 객체>)
//   .catch(err => <로딩 에러, e.g. 해당하는 모듈이 없는 경우>)
// let {hi, bye} = await import('./say.js');

// hi();
// bye();


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <AppTest />  //<----------------
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();