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