리액트 개발환경 설정

React프로젝트 생성 방법

cd 프로젝트생성할폴더
npx create-react-app my-app
cd my-app
npm start // 서버 시작

ctrl c를 입력하면 서버가 종료된다.

폴더 분석

• index.js
  서버 시작 시 첫번째로 실행되는 파일
  App : App.js에서 import 한 것으로 컴포넌트이다.

• index.html
  리액트 프로젝트에서 일반적인 경우 보여지는 하나의 html, 여기서 id='root'인 div태그는 index.js의 'root'이다.

• App.js
  App함수가 있고, 그것을 export한다.

JSX

리액트에서 개발한 문법으로 브라우저에서는 jsx를 지원하지 않기 때문에 실행할 때 그대로 실행되지 않고 브라우저에서 실행될 수 있는 형태로 코드가 변환되는데, 개발자 도구의 sources탭을 보면 변환된 코드들을 볼 수 있다.

리액트의 작동방식

리액트의 컴포넌트는 기본적으로 자체 html요소다. 리액트는 선언적으로 우리가 목표하는 바를 작성하면 그것을 브라우저에 그려준다.

// App.js
function App() { 
  return (
    <div> 
      <h2>리액트 시작<h2>
    <div> 
  );
}
      
export default App

여기서 h2태그와 함께 '리액트 시작'이 들어간 div태그를 만들어서 화면에 보이도록 하고 싶은 것이 우리가 목표하는 바이다. App함수는 결국 내부의 html코드를 반환하는 것이다.

// index.js
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />); // 이 코드로 인해 결국 브라우저에 App에서 반환된 내부 html이 브라우저에서 작동될 수 있는 형태로 변환되어 브라우저 화면에 나타나게 된다.

리액트의 편리성

태그 하나를 html에 추가할 경우 리액트와 자바스크립트의 차이를 보면 jsx의 편리성을 알 수 있다.

const para = document.createElement('p');
para.textContent = 'This is also visible!';
document.getElementById('root').append(para); // 자바스크립트에서 p태그 추가 (명령적)

function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
      <p>This is also visible!</p> // jsx에서 p태그 추가 (선언적, 최종 상태만 정의하면 된다.)
    </div>
  );
}