210825
Web_React #11
- dicegame
react 실습으로 주사위 게임을 만들어보자
프로젝트 세팅
public폴더의 index.html제외하고 삭제 및 내용 수정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>주사위 게임</title>
</head>
<body>
<div id="root"></div>
</body>
</html>src폴더의 index.js제외 전체삭제 및 수정
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>안녕 리액트~</h1>,
document.getElementById('root')
);정상 실행 확인
-
index.html
웹브라우저에서 가장 먼저 실행되는 파일이라고 할 수 있다. -
index.js
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>안녕 리액트~</h1>,
document.getElementById('root')
);react-dom이라는 패키지에서 디폴트로 export하는 객체를 ReactDom이라는 이름으로 import한다.
그리고 render라는 것을 실행하는데, render는 화면을 그린다는 뜻이다.
render메소드를 보면 두개의 argument를 받는다. 코드 내에서 html태그를 그대로 사용하는 것을 확인할 수 있다. <h1>태그를 만드는 것이다. getElementId('root')는 root라는 id를 가지고있는 html요소가 사용되는 것
즉 render가 실행되면 react는 첫번째 argument값을 바탕으로 두번째에 새로운 html요소를 만들고, 그 요소를 두번째 argument값에 집어넣는 방식으로 동작한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>주사위 게임</title>
</head>
<body>
<div id="root"></div>
</body>
</html>코드를 보면 root라는 이름은 index.html에서 div 태그의 id이다. 저곳에 index.js에서 만든 h1태그를 넣어주는 것이다.
참고
https://www.codeit.kr/courses/react-frontend-development/topics/getting-started-with-react
공부중인 것들 기록