Today Yewon Learned

[React] index.html과 index.jsp 본문

React

[React] index.html과 index.jsp

데브워니 2021. 12. 30. 09:52

실행순서

index.html → index.jsp

 

 

index.html

- 웹 브라우저에서 가장 먼저 실행되는 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>주사위 게임</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

 

 

index.jsp

- index.jsp파일이 열리고 나서 실행되는 파일

- React 코드들 중에서 가장 먼저 실행되는 파일

import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>안녕 리액트!</h1>,
  document.getElementById('root') // 'root'라는 id속성 가져옴
);

- ReactDOM이라는 패키지에서 default로 export하는 객체를 ReactDOM이라는 이름으로 import해서 이 객체의 render라는 함수를 실행

- render : '화면을 그린다', React에서는 render라는 메소드로 html 태그를 만들어줌 (JSX 문법)

- ReactDOM.render() : 첫 번째 argument값을 활용해서 html 요소를 만들고, 두 번째 argument값에 그 값을 넣어줌

* ReactDOM.render 메소드는 index.jsp파일 실행시 한번만 수행됨

'React' 카테고리의 다른 글

[Visual Studio Code] 정리된 코드 만들기(Beautify)  (0) 2024.01.07
[React] Component  (0) 2022.01.15
[React] Pragment  (0) 2021.12.30
[React] JSX  (0) 2021.12.30
[React] React 실행하기  (0) 2021.12.27
'React' Related Articles more
Comments