Programming/React

리액트 기초

mingule 2018. 6. 16. 19:46

리액트로 프로젝트를 생성하면, 

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를 봐도 비슷한 형식으로 쭉 진행이 되는 것을 알 수 있다. 이 파일은 거의 수정할 일이 없다.


//1
import React from 'react';
import ReactDOM from 'react-dom';
//2
import './index.css';
import App from './App';

//3
import 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


일단 처음 리액트를 시작해서 뭐가 뭔지 대애충 알아봤다. 담에는 좀 더 구체적인 내용을 봐야겠따.