🔆 html 파일에 js을 안걸어줘도 걸린것 처럼 실행되는 이유? - 질문
→ 내 생각 : ReactDOM이 리액트를 렌더하는 라이브러리 인데 cra하면 자동으로 설치되어 있어서 import ReactDOM만 하면 바로 jsx코드가 렌더링 되는것임?
-
ReactDOM : 리액트 코드를 실제 HTML로 렌더링 하기 위해 사용하는 도구
-
ReactDOM.createRoot() : 이 부분에서 동적으로 리액트 코드를 실제 HTML에 렌더링 합니다
(ReactDOM.render() 구문이 폐기되고, ReactDOM.createRoot 구문으로 대체됐음.)
< 렌더 과정 코드 설명 >
1. index.html
<body>
<div id="root"></div>
</body>2. index.js
- 최근 방뀐 방식
: ReactDOM.createRoot(rootNode).render();
import React from "react";
import ReactDOM from "react-dom/client";
// 3. App을 import해줌.
import App from "./App";
// 4. html의 root아이디 요소를 지정한 후, 이 요소에 App컴포넌트를 렌더함.
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);- 옛날 방식 (ReactDOM.render(, rootNode))
ReactDOM.render(<App />, document.getElementById("root") );3. App.js
import { useState } from "react";
function App() {
const [value, setValue] = useState(0);
const setValueFn = () => setValue((prev) => prev + 1);
return (
<div>
<h1>{value}</h1>
<Button text={"continue"} onClick={setValueFn} />
</div>
);
}
// 1. App컴포넌트에서 작업함.
// 2. 이 App을 export해줌.
export default App;
~23.05