React 개발 시작 전 기본 셋팅
goormIDE 환경을 이용해 포스팅하였습니다. React 프로젝트를 처음 생성하고 실행시키면 아래와 같이 React에서 만든 기본 페이지가 나오게 된다. 실습을 하려면 저 기본 페이지 부분을 없애야 하므
ludeno-studying.tistory.com
위의 포스팅을 통해 React의 기본 페이지를 완전히 빈 페이지로 만들었으면, 이제 그 빈 페이지를 채워 넣어서 나의 페이지를 만들어야 한다.
React에서 화면이 렌더링 되는 과정
먼저, 간단하게 React가 화면을 렌더링 하는 과정을 설명하자면
생성한 React 프로젝트에서 npm run start 나 npm start 를 통해 프로젝트를 실행시키면 public 폴더 내부에 index.html 파일을 실행한 결과로 나오게 된다.
생성한 React 프로젝트 > public > index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
보다시피 body 태그 내부에 id가 root인 div 태그 말고는 전부 주석이 있고 정작 렌더링 될것은 없어 보인다.
하지만 크롬 개발자 도구를 사용하여 index.html을 보면
div 태그 아래에 추가로 App이라는 class를 가진 div 태그가 새로 생겨나게 된다.
index.html에서는 보이지도 않던 태그가 렌더링 되면서 어떻게 생겨났냐 하면..
src 폴더 내부의 index.js 파일을 보면 답이 나온다.
생성한 React 프로젝트 > src > index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
위의 코드에서 주목해야할 문장은 바로 ReactDOM.render( ); 부분이다.
/public/index.html의 <div id = "root"></div> 태그 내부에 App 이라는 태그를 렌더링 하기 위해서는 위와 같은 코드를 필요로 한다.
App 태그 내부의 값 수정
src 폴더내부에 App.js 파일을 열어서 수정하면 된다.
React 프로젝트 폴더 > src > App.js
import './App.css';
function App() {
return (
<div className="App">
</div>
);
}
export default App;
여기서 <div className="App"></div> 내부에 원하는 태그를 넣어서 사용하면 된다.
React 프로젝트 폴더 > src > App.js 수정
import './App.css';
function App() {
return (
<div className="App">
<h1>This is React</h1>
<p>React is ...</p>
</div>
);
}
export default App;
수정을 하고 나서 저장하면 자동으로 페이지가 새로 고침 되면서 원하는 태그가 화면에 렌더링이 된다.
개발자 도구를 확인해보면 index.html도 정상적으로 <div className="App"></div> 내부에 입력한 값이 들어가 있는 것을 확인해 볼 수가 있다.
'JavaScript > React' 카테고리의 다른 글
| React 컴포넌트(Components) 정의 및 렌더링 (0) | 2021.08.18 |
|---|---|
| JSX를 이용해 React Element 생성 및 렌더링 (0) | 2021.08.17 |
| React 개발 시작 전 기본 셋팅 (1) | 2021.08.11 |
| React 개발 환경 구성, 실행 (1) | 2020.09.12 |
