1-2) [리액트 기초] 기본 기능 다루기

 

 

1-1) 리액트 앱 최초 만들기

 

일단, 위와 같이 npx create-react-app 을 이용하여 리액트 보일러 플레이트를 생성한다.

 

아래와 같은 소스 구조를 가지고 있다.

 

리액트 소스구조

 

 

아래 파일 제거

src/App.test.js
src/logo.svg

 

 

 

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 React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
// 제거 처리 > 기본적으로 React.StrictMode는 React 17부터는 자동으로 적용된다.
// import reportWebVitals from './reportWebVitals'; //리액트 앱 성능 측정 용도로 사용되며 초반에 필요없음

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // 제거 > StrictMode는 개발 모드에서만 동작한다.
  // <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();

 

 

 

App.js 오리지널 소스

import logo from './logo.svg';
import './App.css';

function App() {
  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>
  );
}

export default App;

 

 

 

App.js 아래와 같이 제거/수정

import './App.css';

function App() {
  return (
    <div className="App">
      React gogo!
    </div>
  );
}

export default App;

 

 

localhost:3000 호출하면 아래와같이 나타난다.

 

여기서 <div className="App"><div> 부분을 제거하면 JSX 문법을 위반하기 때문에 오류가 발생합니다.