리액트에서 html 요소

리액트는 싱글페이지 어쩌고로,

 

js타입의 한 페이지에 html, js 모두 쓴다.

즉, html 요소도 쓴다.

 

그래서 이거 봤더니,

const getLi = ()=>{
const list = [];
for(let i =0; i< 3; i++){
  list.push(<li key={i}>{i}</li>);
}
return list;
}

아예 저 <li></li>

저 요소가 뭔가 리액트에서 제공하는 객체였다.

그리고, 저 객체사이에서 값을 쓰려면 {변수명} 이렇게 쓰면 된다.

 

원래 js에서는 문자열로 html 페이지에 넣어서 html에서 읽게 만들었다면,

저거는 그냥 html을 저렇게 객체로 다룬다.

문자열로 넣지 않았는데도 저게 잘 됐다.

 

 

그리고,

return (
<main style={sty}>
	<ul>{getLis()}</ul>
</main>
);

이렇게.

 

그러니까,

<ul>{[<li>1</li>,<li>2</li>,<li>3</li>]}</ul>

이렇게 배열로 받으면,

그 요소를 차례대로 넣어준다. render() 순간에 해주는 처리 중 하나인 것 같다.

빼먹은 게 있는데, key는 꼭 넣어줘야 한다. html 리스트 요소 할때는.

 

그러니까, 말 했듯이, 결국 <li></li> 이런 것들은 html요소가 아니라 객체이다.

결국, 컴포넌트 파일은 js 파일이기 때문에, 자바스크립트 관련해서만 읽을 수 있는 것이다.

근데, html요소랑 모양을 똑같이 해서, html요소 처럼 보이는 것이다.

 

저거 보면,

(property) JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>

저렇게 결국 저 요소는 HTMLElement이다. (혹은 HTMLElement를 상속 받은)

 

 

그러니까, 결국 우리가 만든 컴포넌트 따지고 보면 return 시키는 게 저 HTMLElement 객체들인데,

그게 index.js에 결국 다 return 되어 마치 재귀함수처럼 가져오게 된다.

 

그러면, index.js에서 그 가져온 것들을

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
      <App></App>
  </React.StrictMode>
);

저렇게 render 해서 읽어버리니까,

그 HTMLElement 요소 하나하나들을 render해서(뭐 아마 el.elRender 이런 함수가 있고 그렇게 하지 않을까) 실제 html 요소로, 만드는 것이다. (아마도?)

 

단, 근데 String으로 관리되는 건 아닌 듯 하다.

 

하긴 String으로 하면 관리 힘들다.

 

나는 그냥 저 요소들을 string으로 해서 #root에 보내면(.html에 보내면) 그게 html문서에서 읽으면 html요소가 되는거니까 난 그렇게 한 줄 알았는데 아니라고 한다.

생각해보니 그러면 관리하기 굉장히 힘들다.