SandBox환경에서 React를 살짝 맛보고, 후에 Visual Code를 이용해서 npm을 이용해보겠습니다.
DOM 조작
JS로 DOM을 조작하는건 당연한 일이다. JS는 "동적"으로 웹페이지를 만들기 위해서, 작성하는 스크립트니까.
* DOM 이란?
Document Object Model로, 브라우저에서 HTML 태그를 처리하기 위해서, 만든 "개념"이라고 보면 된다.
예를들어, 버튼 1개가 있으면 우리는 버튼이라고 인식하지만 , 브라우저에서는 버튼 태그를 지정하기 위해서 일종의 관리 체계가 필요하게 된다. 즉, 태그들과 같은 HTML 객체들을 관리하기 위한 체계가 DOM이다. DOM은 트리형태를 띄고 있다.
const rootEl = document.getElementById("#root");
const inner= document.createElement("h1");
inner.textContenet = "This is JS!";
rootEl.appendChild(inner);React 또한, JS의 라이브러리 이기 때문에, 위와 같은 형태로 처음에는 DOM을 조작했다.화면에 Render하는 함수는 따로 있었지만, Element를 생성하고넣는 형태는 JS와 별 다를게 없었다. 즉 , DOM 조작에 대한 개념은 똑같다.
//element
const element= React.createElement("h1",null,"This is React!");
//render
ReactDOM.createRoot(root).render(element);See the Pen JS,React -1 by Doge (@DogeIsFree) on CodePen.
JSX의 등장
위 코드를 봐도 알겠지만, 기존의 DOM 조작을 조금만 변형했을 뿐, 크게 얻는 이점은 없다. 오히려, ReactDOM이라는 생소한 객체를 써야하고 , 익숙해진 Document 조작을 버리기에는 React는 불편했습니다. 그래서 , React는 JSX라는 문법을 지원하게 됩니다.
JS를 이용해서, 결국은 HTML을 만들어 내는거니까, HTML 문법을 JS로도 작성할 수 있게끔(?) 만든게 JSX입니다.
(JS와 HTML 사이의 그 무언가)
const element= React.createElement("h1",null,"This is React!");
//JSX
const element = <h1>This is JSX</h1>하지만, 세상에는 공짜는 없습니다. 위의 문법을 지원하기 위해서는 Babel이라는 친구의 도움이 필요합니다.
*Babel이란?
Babel은 ECMA(표준화)된 코드를 이전 JavaScript 엔진에서 실행할 수 있게 해주는 JavaScript 트랜스 컴파일러 입니다.(즉, 최신화된 코드를 옛날 코드 방식으로 바꿔줌)
React의 JSX 문법도 JS 엔진이 알아들을 수 있게끔 바벨이 바꿔줍니다.
See the Pen JS,React2 by Doge (@DogeIsFree) on CodePen.
JSX를 지원하게 되면서, HTML에서, "변수"의 개념을 쓸 수 있게 되었습니다. className도 변수를 취급할 수 있게 되었고, 안에 들어가는 내용도 변수로 취급해서 바로 넣을 수 있게 되었습니다. 예전 JS처럼 각각의 DOM에 하나하나 넣어주는 방법보다 훨씬 간단해지게 됩니다.
DOM객체를 찍어내보자
1개의 Element를 간단하게 만들었습니다. 하지만, 우리는 수많은 Element들을 JS로 통제해 왔습니다. 이제는 , JSX를 이용해서 DOM 객체를 쉽게 찍어낼 수 있지 않을까는 생각을 하게됩니다. ( ㄷㄷ 제가 한건 아닙니다)
아래와 같은 간단한 HTML을 JSX로 작성해봅시다!
<div id="container">
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
</div>React는 JS입니다. JS에서 createDocumentFragement()를 이용해서, 여러가지 tag들을 하나로 묶어서 처리한 기억이 있습니다. React 또한, ReactFragment라는 개념을 이용해서, 위와 같은 여러가지 Element를 하나로 묶어서 children으로 한꺼번에 넣어주는 형태로 구현하게 됩니다.
<body>
<div id="root"></div>
<script type="text/babel">
const element =
<React.Fragment
children={
[
React.createElement("h1",null,"나는 H1"),
React.createElement("h3",null,"나는 H3"),
React.createElement("h5",null,"나는 H5")
]
}
/>
ReactDOM.createRoot(root).render(element);
</script>
</body>React.createElement는 JSX문법으로 작성이 가능하게 됩니다. 즉, 아래와 같이 간단해집니다.
<body>
<div id="root"></div>
<script type="text/babel">
const element =
<React.Fragment
children={
[
<h1>나는 H1</h1>,
<h3>나는 H3</h3>,
<h5>나는 H5</h5>,
]
}
/>
ReactDOM.createRoot(root).render(element);
</script>
</body>children을 inject (주입)하는 형태가 아니라, 태그안에 직접 넣는 방식으로 만든다면, 더 보기 좋은 문법이 될것 같습니다.
<script type="text/babel">
const element =
<React.Fragment>
<h1>나는 H1</h1>
<h3>나는 H3</h3>
<h5>나는 H5</h5>
</React.Fragment>
ReactDOM.createRoot(root).render(element);See the Pen Untitled by Doge (@DogeIsFree) on CodePen.
'Web Front-end > React' 카테고리의 다른 글
| [React/JS/SPA/Render] React의 Rendering (0) | 2022.09.16 |
|---|---|
| [React/JSX/Basic/반복문/조건문] JSX의 편리함 (0) | 2022.09.15 |
| [React/JSX/Component] React의 특징(2) (0) | 2022.07.18 |
| [React/SPA/View] React의 특징 (0) | 2022.07.18 |
| [React/JS] 리왜씀 (React 왜 쓰나요) (0) | 2022.07.18 |