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>
);

🔈 컴포넌트 (Componen)

<aside> 💡 재 사용이 가능한 각각의 독립된 모듈(module)을 뜻한다.

• 컴포넌트 함수 이름의 첫글자 : 대문자

</aside>

• 함수 선언식

  function Header() {
    return (
      <header>
        <h1>header</h1>
      </header>
    );
  }
  

• 화살표 함수

  const Header = () => {
    return (
      <header>
        <h1>header</h1>
      </header>
    );
  };
  

🔈 JSX

<aside> 💡 JavaScript + HTML 태그를 섞어 사용하는 문법 (자바스크립트 XML)

</aside>

• W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어
• *XEL(eXtensible Markup Language)

JSX 닫힘 규칙

JSX 스타일링

🔈 산술/문자열/논리 표현식