Web_React #11

6815 단어 ReactwebReact

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

0809 개발일지

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage