ReactJS에서 HTML 요소들을 어떻게 렌더링하는지에 대해 알아보자.
src
|____App.js
|____index.js
처음 react를 시작하면 src
디렉토리에 여러 파일들이 있을텐데 기본부터 시작하기 위해서 위의 구조와 같이 정리해주었다.
삭제한 파일은 각각의 파일에서 import
되어있을텐데 지워주자. 안 지워주면 에러난다.
react에 대해 잘 알지 못하므로 초심자 입장에서 이해한 내용을 적어본다.
먼저 세가지 파일을 알아야한다.
간략하게 말하자면 App.js
에서 추가한 내용을 index.html
에 삽입하는데 그 과정을 index.js
가 가능하게 해준다.
최종적으로 우리가 볼 화면이며 App.js
의 내용이 추가된다.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
추가하고자 하는 내용을 App.js
의 함수의 HTML 요소에 적어주었다.
function App() {
return (
<div className="App">
hello
</div>
);
}
App.js
에서 추가한 내용을 index.html
의 #root
요소를 가져와서 렌더링해준다.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
이 원리가 바로 react의 우수한 성능의 원인이다.
화면에서 소스코드를 보면 우리가 추가한 "hello"를 찾아볼 수 없다. 즉, 실제로 존재하지 않는 virtual DOM이기 때문이다.(이 부분은 이후에 자세히 공부해보자.)
React에 대해 아직 잘 알지 못하기 때문에 디테일한 부분은 다루지는 못했지만 이렇게 전반적인 그림을 알고 공부하는 것이 중요하다고 생각한다.