31일차 - 리액트 App.js

1. 리액트는 요소검사에서 봐야한다!

• index.html 정적페이지 (페이지 소스보기)
  여기에는 리액트가 지원하지 않는 플러그인만 삽입
  슬릭슬라이더, SEO 최적화, 바로가기, 폰트, 파비콘 등
  (J쿼리/ 부트스트랩/ 스와이퍼는 npm install)
  

---

2. index.js

index.js 거의 안 건드림. App.js / App.css에서 작업하지

• public 폴더 : 웹 세상 (일반 태그 다 먹힘)
• src 폴더 : 리액트 세상

import ~ from '00' "삼성에서 이재용만 와!" (+export)

• import React from 'react';
  └ 모듈방의 'react'에서 대표 React만 왔다!

• import './index.css';
  └ CSS는 from 없이 그대로 갖다씀!

• import App from './App';
  └ 상대경로가 달려있네, 너는...... "컴포넌트" !
  └ 컴포넌트는 src방에 있음
  └ 반드시 상대경로 & 대문자(일반함수랑 헷갈리니까)

<script>
  import React from 'react'; // 모듈방의 'react'에서 대표 React만 왔다!
  import ReactDOM from 'react-dom/client';
  import './index.css'; // CSS는 from 없이 그대로 갖다씀!
  import App from './App'; // 상대경로가 달려있네, "컴포넌트"!
  						   // "src방의 App(.js) 가져와"
  import reportWebVitals from './reportWebVitals';
  
  
  // #root 잡아 = root 변수에 저장
  const root = ReactDOM.createRoot(document.getElementById('root'));
  // 'root'한테 렌더링 돌려라 (=이렇게 화면 노출시켜라)
  root.render(
    <React.StrictMode>  // 부모 태그 열기
      <App />			// 실제로 구동되는 컴포넌트 App.js
    </React.StrictMode> // 부모 태그 닫기
  );

  reportWebVitals();
</script>

---

3. App.js - 로고 바꿔치기 실습

리액트 로고를 바꿔보자!

3-1. 다음 이미지 저장해서 src 폴더에 넣기

3-2. App.js 열기 (함수형 컴포넌트)

return ( 렌더링해서 화면에 뱉도록, 출력되는 코드가 들어있는 곳 );
이 부분이 리액트 첫 페이지를 구성하는 코드들↑↑↑↑↑

3-3. 다 지우고, 다음 로고 집어넣기

export default App - import가 있으면 export도 있지

<script>
  import logo from './img/logo.png';
  import './App.css';

  function App() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} />
        </header>
      </div>
    );
  }

  export default App; // import가 있으면 export도 있지
  
</script>

로고 위치를 변수로 선언하여, JSX 안에 삽입! 그것이 리액트니까