리액트로 프로젝트를 생성하면,
node_modules, public, src 폴더가 생긴 것을 알 수 있다.
뭐, 우리는 node_modules나 public 을 거의 건드리지는 않을거고,
거의 src 안의 파일들을 건드리게 될 것이당!
케케 하지만 먼저 public 폴더의 index.html을 보자.
우리가 알던 흔한 html의 파일과는 쬐금 다르다.
yarn start를 하면 분명 이렇게 페이지가 켜지는데,
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="%PUBLIC_URL%/manifest.json"><link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"><title>React App</title></head><body><div id="root"></div></body></html>
index.html 을 보면 아무 내용이 없고, body 안에 root라는 id를 가진 div 하나만이 있는 것을 볼 수 있다.
>>ㅑ 짱신기 일단 신기한 걸 제외하고, src 폴더 안의 파일들을 보면
App.css,
App.js,
App.test.js
index.css
index.js
logo.svg
registerServiceWorker.js
가 생긴 것을 볼 수 있따.
역시 우리는 처음이니까 App.js를 먼저 보잠
여길 보면 아까 첫 화면에서 봤던 모든 내용들이 있는 것을 알 수 있다.
import React, { Component } from 'react';import logo from './logo.svg';import './App.css';class App extends Component {render() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><h1 className="App-title">Welcome to React</h1></header><p className="App-intro">To get started, edit <code>src/App.js</code> and save to reload.</p></div>);}}export default App;
크게 세 영역으로 나눌 수 있는데,
import React, 등등이 써 있는 곳 - 외부 파일을 이 파일에서 쓰겠다고 불러오는 코드이다.
class App extends Component 등이 써 있는 곳 - 지금 화면에 떠 있는 모든 것들
export default App; - App을 export 한다는 거당
index.js를 봐도 비슷한 형식으로 쭉 진행이 되는 것을 알 수 있다. 이 파일은 거의 수정할 일이 없다.
//1import React from 'react';import ReactDOM from 'react-dom';//2import './index.css';import App from './App';//3import registerServiceWorker from './registerServiceWorker';ReactDOM.render(<App />, document.getElementById('root'));registerServiceWorker();
1번은 리액트를 불러오는 거다.
맨 처음에 우리가 reactApp을 만들 때, node_modules에 리액트에 관한 것들을 다운받게 되는데,
실제로 들어가서 확인해보면 react, react-dom이라는 것을 모두 다운받아서 가지고 있는 것을 알 수있다.
2번은 내가 작성한 스크립트를 불러오는 것이다.
src안의 index.css 파일을 import 하고, ./App 안의 App을 불러와서 ReactDOM.render에 넣고 있당
3번은 백그라운드 캐시인데, 몰라도 된ㄷㅏ 그냥 있구나~ 정도로 알면 좋당 Progressive Web App을 위한 거다.
혹시 몰라서 stackoverflow에 찾아봤는데,
요렇게 나와있다.
The service worker is a web API that helps you cache your assets and other files so that when the user is offline or on slow network, he/she can still see results on the screen, as such, it helps you build a better user experience, that's what you should know about service worker's for now. It's all about adding offline capabilities to your site.
https://stackoverflow.com/questions/47953732/what-does-registerserviceworker-do-in-react-js
일단 처음 리액트를 시작해서 뭐가 뭔지 대애충 알아봤다. 담에는 좀 더 구체적인 내용을 봐야겠따.
'Programming > React' 카테고리의 다른 글
| [2] JSX 기본 문법 (0) | 2020.07.06 |
|---|---|
| [1] JSX 기본 문법 (0) | 2020.07.06 |
| [React] Webpack, Babel이란? (0) | 2020.07.06 |
| 로컬에서 리액트 개발환경 세팅하기 (0) | 2018.06.16 |
| react 시작하기 (0) | 2018.06.16 |
댓글