리액트 react 소스 수정 방법, 배포

1. 소스 수정 방법

create-react-app 기본 구조

 

src > index.js 기본 입구 파일

 

index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

index.js는  import './index.css'; 의 스타일을 적용 받음

element id가 root인 태그의 안에 사용자 정의 컴포넌트인 App을 랜더링 시킴

App 은 import App from './App'; App.js안의 내용임

 

App.js

import logo from './logo.svg';

import './App.css';

function App() {

  return (

    <div className="App">

      Hello React !

    </div>

  );

}

export default App;

App.js는 import './App.css'; 의 스타일을 적용 받음

 

2. 배포

npm start는 개발 환경에 최적화됨 (public)

npx run build는 빌드가 되면서 배포에 최적화된 build가 생성됨 (build)

 

npx serve -s build