1. 준비사항

정의 : 컴포넌트를 여러가지 파일로 분리하여 저장하고 JS가 아닌 JSX 라는 문법을 사용

 

- Webpack : 여러가지 분리된 파일 하나로 합쳐주는 라이브러리

- Babel : jsx를 비롯한 새로운 js 문법을 사용하기 위한 라이브러리

- Node.js : Webpack과 Babel 등 여러 라이브러리를 사용하기 위한 javascript 런타임

- Yarn : 캐싱 시스템 등 조금 더 개선된 npm(node package manager)

- Visual Studio Code : 실제 개발을 위해 필요한 에디터 (공짜)

 

 

컴포넌트 App.js 코드 분석

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

//파일에서 jsx문법 사용하려면 React 꼭 import
//Webpack을 사용하기에 logo.svg와 App.css를 이런식으로 불러옴

 

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

//컴포넌트 만드는 방법 중 하나인 클래스 이용하는 방법
//클래스는 꼭 render()이 있어야하고 그 내부에서 jsx를 반환 
//return 뒤의 html 같은 코드 = jsx

	
export default App;
//작성된 컴포넌트를 다른 곳에서 불러 사용하게 할 수 있는 코드

---

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
//APP 컴포넌트 사용하기 위해 import
import * as serviceWorker from './serviceWorker';
 
ReactDOM.render(<App />, document.getElementById('root'));
//브라우저 상 React컴포넌트를 보여주기 위해 ReacDOM.render(렌더링 결과물, 그릴 DOM ) 함수 사용
//public/index.html 파일에 있는 id가 'root'인 DOM을 찾아 app컴포넌트를 렌더링
serviceWorker.unregister();