[React] 리액트 실행되는 방법

🎫 React?

리액트는 Component들을 조립하여 화면을 구성한다.

npx create-react-app my-app 

을 터미널에 입력하면 React에서 제공하는 프로젝트 구조를 다운받을 수 있다.

정상적으로 생성된 React 프로젝트 구조이다.

---

// src 폴더의 index.js

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

    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );

    reportWebVitals();

• src /index.js 파일은 React 서버를 구동할 때 최초로 실행되는 파일로, ReactDOM.render()를 통해 App 컴포넌트를 출력한다.

• document.getElementById('root') = public / indexl.html의 <div> id="root"></div>를 가리키며, App 컴포넌트를 해당 요소에 렌더링 한다.

---

🎵 JSX란?

리액트에서 컴포넌트 렌더링을 위한 문법으로 JSX를 사용한다.

JSX란 JavaScript XML의 줄임말로, 자바스크립트 내에 XML 문법을 작성할 수 있는 편리한 문법이다.

XML에서 요소를 작성할 때 종료 태그를 사용해야하므로, JSX에서도 종료 태그를 작성해야한다.

import React from 'react';
import './App.css';

function App() {
  return (
    // JSX = JavaScript XML
    // 반드시 '/'를 사용해서 종료태그를 작성해야 한다!!
    <div>
      <input id="text"/>
      <div> Hello, React!</div>
    </div>
  );
}

export default App;

기존에 HTML을 작성할 때 <input> 등 하나의 태그로 작성할 수 있는 요소는

/> 같은 종료 태그를 붙이지 않아도 정상 작동 됐지만, JSX에서는 렌더링하지 못한다.

---

✨ React의 컴포넌트의 JSX는 항상 최상위 태그로 감싸져 있어야 한다! ✨

return(
  <div> Hello,</div>
  <div> React </div>
);

와 같이 입력하면 오류가 발생한다.

return(
  <div>
    <div> Hello,</div>
    <div> React </div>
  </div>
);

와 같이 <div></div> or <></> 로 감싸져 있어야 오류가 나지 않는다.

🥨 JSX의 작동 원리

JSX는 리액트에서 어떻게 작동할까?

웹 브라우저는 기본적으로 HTML, Javascript, CSS를 기반으로 구동되기 때문에

React 엔진은 JSX를 자바스크립트로 변환하여 출력한다.

EX) 위에서 작성한 JSX 코드는 아래와 같이 변환되어 웹 브라우저에서 구동하게 된다.

...
return (
  React.createElement(
    "div",
    null,
    React.createElement("input", {
      id: "text",
      type: "text",
    }),
    React.createElement(
      "div",
      null,
      "Hello, React!"
    )
  )
);

리액트 엔진은 JSX를 분석하여 자바스크립트 코드로 변환한다.

React.createElement() 함수는 리액트 엔진의 함수이며, 기존 자바스크립트의 document.createElement() 함수를 사용하여 객체를 생성한다.

---

출처 : https://velog.io/@crackco/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%9D%98-%EC%8B%A4%ED%96%89