| React로 화면에 'Hello World' 띄우기 |
Hello World를 화면에 표시하기 위해 파일 3개(html1개, js 2개)가 필요하다.
1. index.html
2.index.js
3.App.js
(index.html은 웹이 default로 바라보는 화면이기 때문에 무조건 있어야하는 파일,
index.js는 index.html에 동적으로 JSX를 렌더링해주는 js코드파일,
App.js는 Component (JSX를 return하는 js 함수) 코드이다. (처음 React 생성시 자동으로 잡히는 이름이라 저렇다. 이름은 변경되어도 무방)
2. index.html 코드를 보면 body 태그 안에 아무것도 없다.
<!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" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
body 태그 내부에 root라는 아이디를 가진 non-semantic div태그 하나뿐. 표시되는 것은 없다.
왜? react는 저 태그에 jsx를 동적으로 넣어주는 역할을 하니까.
3. index.html에 jsx를 렌더링 해주는 index.js 코드를 보자
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />,document.getElementById('root')
);
제일 위에 import 문들이 있다. React를 import 해주었는데 밑에 코드에 보면 <App /> 요게 있다. 이런 JSX를 사용하기 위해서는 React를 꼭 import 해주어야한다.
*JSX는 React의 커스텀한 개념인데, 쉽게 말하면 html 태그들을 변수화한 것이다.
상단 import문들을 제외하면 ReactDOM.render(<App />, document.getElementById('root')) 뿐이다.
이 코드 한줄이 동적으로 'App'을 가져와서 'root'라는 아이디를 가진 Element에다 표시해준다.
그럼 여기서 'App'이란 상단 import에 있는 App을 말한다. '<App />'말고 그냥 'App'으로 코딩하면 react가 인식을 못한다. 즉 react가 컴파일 하기 위한 문법으로 생각하면 된다.
4. index.js에서 import 해준 App.js 코드를 보자
import React from 'react';
function App() {
return (
<div>Hello World</div>
);
}
export default App;
App은 자바스크립트 함수로, <html> 태그를 return문에 써주었다. 이 App 함수가 react의 Component이다.
return문 내부에 적힌 <div></div>가 react의 jsx 이다.
예를 들어 코드에 'var test = <div>Hello World</div>'라고 선언 후 리턴문에 test 변수를 return해도 동일한 결과가 보여진다.
즉, index.js는 이 App.js를 import해서 App이라는 컴포넌트에서 반환하는 jsx를 가져다 render 해주고 있는것.
자 이제 동적으로 코드가 적용된다는 것을 화면에서 확인해 볼 수 있다.
5. 결과
화면을 띄우고 소스코드를 확인해보면 html의 'root' body 내부에는 아무런 태그가 없지만
web화면상에는 코드가 출력된것을 볼 수 있다.
react는 이렇게 동적으로 화면을 표시해주기 때문에 코드를 line by line으로 컴파일해서 화면 표시하는 방법 보다 빠르다.
'React_JS' 카테고리의 다른 글
| [개념정리] React_JSX (0) | 2020.04.04 |
|---|