[React] JSX문법 Html 코드변환 방식

import TestPage from "./components/TestPage";

function App() {


  return (
    <div>
      <h1>TEST TEXT</h1>
      <TestPage items = {expenses}></TestPage>
    </div>
  );
}

export default App;

 

return 쪽에 항상 전체를 div태그를 사용하여 감싸주는 등 전체요소의 틀이 필요하다

 

이는 JSX문법의 특성때문인데 여타 다른 언어와 같이 웹에서 지원하는 언어로 변환시켜주는 과정이다.

 

JSX코드는 인간의 눈에 익숙한 언어를 js 파일에 편하게 작성할 수 있도록 도와주지만 해당 문법은 브라우저에서 지원하지 않기에 이를 react를 통해서 변환시켜준다.

 

react는 해당 코드를 웹에서 표현하기 위해 html 코드로 변환시켜준다

function App() {
  return React.createElement("div", null,
    React.createElement("h1", null, "TEST TEXT"),
    React.createElement(TestPage, { items: expenses })
  );
}

return문은 최상위 요소만을 가질 수 있기에 하나의 요소를 만들고 그 내부에 다른 요소를 만들면서 이어나간다.

그렇기에 여러개의 요소를 반환시키려면 배열을 사용해야 하지만 div , h1 과 같은 태그는 배열이 아닌 하나의 요소이기에 항상 전체를 감싸서 최상위 요소만 변환시킬 수 있도록 작업해주는 것 이다.