Default 상태 :
- 원하는 위치에 'dicegame'이라는 폴더 생성
- vscode로 'dicegame' 폴더 열기
- 터미널에 'npm init react-app .' 작성하여, react 프로젝트 생성
순서1_public 폴더에 index.html파일 외 전부 삭제
- index.html 내의 코드는 아래의 코드로 수정한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>주사위 게임</title>
</head>
<body>
<div id="root"></div>
</body>
</html>순서2_src 폴더에 index.js파일 외 전부 삭제
- index.js 내의 코드는 아래의 코드로 수정한다.
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>안녕 리액트!</h1>);
＃코드 의미 :
①. ReactDOM 객체 : React 프로젝트 전체의 대한 객체 , 프로퍼티나 메소드로 React 프로젝트를 기능을 조정
②. ReactDOM 객체 render() 프로퍼티 메소드
- 매개인자 : 태그 + 태그.textContent , document의 요소노드
- 풀이 : 매개인자1를 매개인자2에 삽입해서, 웹페이지 출력에 그려내겠다는 뜻
즉, 변수 root 에 ReactDom객체로 document(index.html)의 div#root태그 노드를 저장
root노드에 <h1>안녕 리엑트!</h1>의 태그를 자식에 추가하고, 웹 페이지에 바로 출력, 렌더링한다.
③. 버전이 변경되어, render 출력 방식이 바뀌었다.
- const 변수 <= ReactDOM.createRoot(document.요소노드);
- 변수.render(추가할 태그+태그.textContent);
● 외부 React 프로젝트를 가져와 사용할 때,
일반적으로 외부 React 프로젝트를 배포할 때, node_modules 폴더를 제외하고 공유하게 되어있다 한다. (이유 : 용량이 존나 커서),
=> 따라서, package.json 내 코드를 일부 수정 후, 터미널에서 "npm install"을 입력하면, 필요한 부분을 설치가 된다.
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},결과 : "node_modules"폴더가 생성된 것을 알 수 있다.
'CodeIt_Sprint > React_초급' 카테고리의 다른 글
| (6)React_초급_JSX 문법3 : JSX코드에 JS변수, 함수하기 (0) | 2024.11.21 |
|---|---|
| (5)React_초급_JSX 문법2 (0) | 2024.11.21 |
| (4)React_초급_JSX 문법1 (0) | 2024.11.21 |
| (2)React_초급_React 개발자 도구, 확장 프로그램 설치 (0) | 2024.11.21 |
| (1)React_초급_개발환경셋팅(Window) (0) | 2024.11.21 |
