REACT 시작

React 프로젝트 분석하기

ㄴsrc -App.js
-index.js
-index.css

index.js 구조를 통해 보는 React의 구조

//index.js 전체 코드
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

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

0. React dom

import ReactDOM from 'react-dom/client';

react-dom으로부터 ReactDOM을 가져오고 있는데
이는 ReactDOM이라는 객체를 서드파티 (node.js module) 라이브러리에서 가져온다는 뜻.
이 라이브러리는 의존성 중 하나이며 로컬에 설치되어 있다.

• package.json 에서 보면 react 와 react-dom이 있는 것을 확인할 수 있다.
• 이 둘은 나뉘어 있지만 둘이 합쳐 React 라이브러리를 이룬다.
  
  
  import를 통해 index.js 에 ReactDOM을 가져왔다.

1. index.js 파일에 있는 코드가 가장 먼저 실행된다.
   npm start 프로세스를 통해 파일의 코드를 읽고 브라우저에 전달한다.

2. index.js 에 index.css 를 import
   npm start 덕분에 index.css 를 읽고 css 파일 내부에 정의된 style을 불러올 수 있다.

import './index.css';
import App from './App';

3. ReactDom.createRoot
   import를 통해 가져온 ReactDOM에서 creatRoot 메서드를 호출하고 있다.
   creatRoot은 React를 사용하여 구축할 전체 사용자 인터페이스의 메인 엔트리 포인트 혹은 메인 훅을 생성한다.

creatRoot은 React로 만들 사용자 인터페이스가 로딩되는 웹 페이지의 어느 곳에 위치해야 하는지를 알려준다.


4. 그 다음 확인해야할 파일은 public 폴더의 index.html이다.

index.html

이 단일 html파일이 브라우저에 로딩된다.
SPA (Single Page Application)에서는 오직 한 개의 HTML 파일만 사용한다.

그 외 웹페이지상의 모든 사용자 인터페이스 관련 변경 사항은 React가 처리한다.

• index.html 파일은 엔트리 포인트로써 React가 관리하는 사용자 인터페이스 전반이 렌더링될 위치가 된다.
• index.html 에 index.js 가 렌더링할 위치를 태그 id 형태로 만들고 내부에 들어갈 내용은 index.js에서 그린다
  

//index.html
<div id="root"></div>

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

root 상수(변수) 에 저장한 뒤 root에서 render 메서드를 호출한다.
React에게 root(div태그)에서 무엇이 렌더링 되어야 하는지를 알려준다.
App.js 로부터 import 한 App으로 작업하는데 ( < App /> ) 구문은 JSX이다.

App

App은 컴포넌트인데 이 컴포넌트는 root id를 갖는 요소가 있는 곳에 렌더링 되는 컴포넌트이다.

=> div ( id = "root" ) 태그 내에 렌더링 될 것

App.js

function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
      <p>This is React!</p>
    </div>
  );
}

export default App;

• 한 파일에 정의된 함수, 클래스, 객체를 다른 파일에서 사용하고자 하는 경우 export하고 import하는 과정이 필요하다. (이렇게 파일 간 연결)

• App() 은 return 하는데 HTML 코드를 반환한다. => JSX 기능

---

Ref

• Udemy Maximilian Schwarzmüller 강의