전화번호부를 예제를 통해 React를 배워보자
1. index.js
프로젝트를 진행하기 전, 우선 index.js 파일에 대해서 알아보자.
// 경로 : src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();ReactDOM.render(<App />, document.getElementById('root'));
이 코드가 의미하는 것은, App 컴포넌트를 root라는 id를 가진 element에 render하라 이다.
그런데 어떤 파일에 있는 element에 렌더링할까? public/index.html 파일로 들어가 보자.
2. public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html><div id="root"></div>코드, 바로 저기에 렌더링 된다.
React는 프로젝트 내에서 일련의 과정을 거친 후, 저기 있는 div에 요소들을 추가시켜준다.
그럼 index.js에서 App 컴포넌트를 렌더링한다고 했으니, App 컴포넌트에서 전화번호부 형태를 만들어보자.
jlog