[React] React Element

Enini·2022년 5월 17일
0

React JS

목록 보기
2/10

1. react JS element 생성하기

이 전 글에서 react를 import 했기 때문에

<script>
	const span = React.createElement()
</script>

createElement function을 가진 React object에 접근할 수 있다.

<script>
	const span = React.createElement("span");
</script>

괄호 안에 "span"은 내가 생성하고자 하는 HTML 태그와 똑같은 이름이어야만 한다.

2. body 안에 React Element 가져오기

React JS가 HTML을 생성한다.

<body>
	<span>Total clicks: 0</span>
    <button id="btn">Click me</button>
</body>

이렇게 작성하지 않고 React가 대신 해준다. 하지만 실제로 하려면 react-dom을 사용해야 한다.

React JS는 어플리케이션이 interactive 하도록 만들어주는 library.(=엔진)
React-dom은 library 또는 package인데 모든 React element들을 HTML body에 둘 수 있도록 해준다.

하지만 이 방법은 매우 어려운 방법이고, 개발자들은 이렇게 사용하지 않는다.
모든 것이 처음부터 포함된 React JS 프로젝트를 생성하는 법이 따로 있다. (그러니 암기할 필요가 없다.)

<script>
	const span = React.createElement("span");
    ReactDOM.render()
</script>

render은 React element를 가지고 HTML로 만들어 배치한다는 것이다. 사용자에게 보여준다는 의미.

ReactDOM.render(a, )a를 render 한다. 그리고 reactDOM에게 어디에 span을 둘 것이다라고 말해주어야 한다.
사람들이 하는 방식은, 아래와 같이 id="root"를 가진 div를 만들고 ReactDOM에게 spanroot 안에 두라고 하는 것이다.

<body>
	<div id="root"></div>
</body>

그렇게 하려면 먼저 root를 가져와야 한다.

<script>
	const root = document.getElementById("root");
	const span = React.createElement("span");
    ReactDOM.render(span, );
</script>

이제 ReactDOM에게 말해주어야 한다. span을 root 안에 render 해달라고 말이다.

<body>
	<div id="root"></div>
</body>
<script>
	const root = document.getElementById("root");
	const span = React.createElement("span");
    ReactDOM.render(span, root);
</script>

<body><div>는 마지막으로 적는 HTML이 될 것이다.

이 단계 이후로는 모두 아래와 같은 방식으로 React element를 생성할 것이다.

const root = document.getElementById("root");
	const span = React.createElement("span");
    ReactDOM.render(span, root);

3. span 생성하기

<body>
	<div id="root"></div>
</body>
<script>
	const root = document.getElementById("root");
	const span = React.createElement("span");
    ReactDOM.render(span, root);
</script>

위 코드의 span은 현재 비어있다.
createElement에는 우리가 더 작성할 수 있는 argument가 있다.
예를 들어, 두 번째 argument로 둘 수 있는 것은 span의 property. property는 classname이 될 수도 있고, id가 될 수도 있다.

const span = React.createElement("span", {id: "sexy-span"});

위의 단 한 줄의 코드로 span을 만들고 id를 주었다. 하지만 아직 span은 비어 있다.
채워주는 방법은 createElement의 세 번째 argument로 들어간다. (외울 필요 없음)

createElement의 세 번째 argumentspan의 content(내용)이다.

const span = React.createElement("span", {id: "sexy-span"}, "Hello, I'm a span");

spandiv, button도 되고, 유효한 HTML 코드이면 된다.
그리고 다음으로 property를 줄 수 있다.

하지만 결론은 지금까지 React JS가 너무 복잡하다는 것을 볼 수 있다. 그냥 HTML 페이지에 넣으면 되는데 여러 번의 복잡한 방법을 사용한다.

React JS는 우리가 해왔던 방식을 거꾸로 하고 있다는 것을 알 수 있다.

React JS의 핵심!!! 유저에게 보여질 내용을 컨트롤 할 수 있다는 뜻.

바닐라JS에서는 HTML을 먼저 만들기 -> 그걸 JS로 가져와서 -> HTML을 수정하는 방법.
하지만 React JS에서는 모든 것이 Javascript로 시작해 -> 그 다음에 HTML이 되는 방법이다.

profile
안녕하세요! 만나서 반갑습니다!

0개의 댓글