해당 내용을 숙지하고 React가 렌더링되는 구조를 이해하는데 감이 잡혔다.
index.js
src폴더에 포함되어 있으며 메인 프로그램이다.
여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시한다.
import React from 'react'; //react.js에서 React 코드를 import해오다
import ReactDOM from 'react-dom'; // react-dom.js에서 ReactDOM 코드를 import해오다
import './index.css'; // index.css를 import해오다
import App from './App'; // App.js에서 App코드를 import해오다
import reportWebVitals from './reportWebVitals'; // reportWebVitals.js에서 reportWebVitals를 import해오다
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// 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();ReactDOM.render(첫번째인수, 두번째인수)
첫 번째 인수는 App.js으로 정의되는 App 컴포넌트를 지정하고, 두 번째 인수는 root라는 ID의 요소를 지정하고 있다.
⇒ App 컴포넌트가 root 태그에 포함된 코드에 렌더링되고 출력
🚨근데 이 때 위의 코드를 작성하면 경고 메세지가 뜰 수도 있다🚨.
이유는 18버전 이상의 react에 작성하면 위에 주석 처리된 If you want to start measuring performance~ 라는 메세지가 출력되는데, ReactDOM.render를 리액트 18버전 부터는 지원하지 않기 때문에 위와 같은 메세지가 뜨는 것이다.
이를 해결 하기 위해선 ReactDOM.createRoot로 대신 작성해주면 된다.
// 18버전 이상의 index.js
import React from 'react';
import ReactDOM from 'react-dom';
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>
);
reportWebVitals();➕그 외 추가 설명
코드의 상단에 import문이 여러개 작성되어 있는데, 이는 외부의 모듈을 로드하는 것이다.
이것은 ES6에서 지원되는 기능으로 React에는 “Babel”라는 컴파일러를 사용하고 있기 때문에 이러한 ES6의 기능을 사용할 수 있다.
What is 모듈?
React를 개발하다보면 파일이 커지면서 여러 개의 파일로 나뉘게 되는데, 이 때 분리된 파일들의 이름을모듈(module)이라고 한다. 모듈내에는 함수, 변수 등 있다.
또 다른 모듈 안에 있는 값을 불러오거나(import), 내보낼 수 있다(export)
What is Babel?
Babel은 자바스크립트 es6문법을 es5로 변환해주는 트렌스파일러(transpiler)이다.
이것을 통해 React를 일반 브라우저에서 실행시킬 수 있다.
babel 공식 사이트에서 es6문법으로 변환된 js코드를 확인할 수 있다.
index.html
public 폴더에 있다. 메인 프로그램인 index.js에 대응되는 것으로, HTML 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 일어 와서 렌더링된 결과가 표시된다. (index.html 이름을 바꿀시 오류발생)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>id=”root”
< body >의 < div id="root">< /div >라는 태그가 있다. id=”root”는 index.js의 ReactDOM.render의 인수로 document.getElementById(’root’)로 지정한 것이다.
지정한 root가 < div id="root">< /div >태그를 가르키므로, 이 태그 부분에 컴포넌트를 포함해서 렌더링되게 하도록 하고 있다.
즉 < div id="root">< /div >에서 App컴포넌트가 렌더링된다.
App.js
import React, { Component } from 'react';
react에서 제공하는 Component Class를 상속받아 구현하기 위해 Component를 import
class App extends Component {...}
Component 클래스를 상속하여 App 클래스를 생성하고 있다는 것을 알 수 있다.
이 Component라는 것이 컴포넌트의 기반이 되는 클래스이다.이를 상속하여 컴포넌트로 작동하도록 한다.
render () {return ...;}
return부분은 아래와 같다.
return (
... 생략 ... </ div);
JSX 형태로 나타난다.
코드카데미에서 공부하면서 렌더되는 부분이 어디에 해당되는건지 궁금했는데 이 파일에 해당되었나보다.
