오늘은 강의를 들으며 공부했던 내용을 작게나마 정리하려고 한다.
만약 리액트로 아래와 같이 텅텅 빈 html 내부에
<h1> 태그를 이용해 "Hello world"를 출력하고 싶다면 어떻게 할 수 있을까? 🤔
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
</html>
먼저 자바스크립트로 DOM을 다루며 Element를 생성할 때를 생각해보자.
우리는 아마도 아래와 같은 스크립트를 작성할 것이다.
const root = document.getElementById("root");
//삽입할 h1 엘리먼트를 생성
const h1 = document.createElement("h1");
//생성된 엘리먼트에 주입될 텍스트 작성
h1.textContent = "Hello world";
//해당 엘리먼트를 자식으로 추가
root.appendChild(h1);
그렇다면 리액트는 어떻게 작성할까?
같은 html 파일에서 리액트 코드를 작성하기 위해 CDN 코드를 추가해줬다.
+)
CDN이란,
Content Delivery Network의 약자로
웹에서 사용되는 다양한 리소스를 저장하여 제공하는 시스템을 의미하는데
지금 우리는 body 내부에 코드를 작성해두면 unpkg => unpack 네트워크를 사용하여
html 문서에서 리액트 코드를 실행이 가능하도록 도와준다.
자세한 링크는 아래에 리액트 공식문서를 링크해두었다!
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
본론으로 돌아와서
리액트에서도 createElement로 엘리먼트를 만들 수 있다.
하지만 차이점이 있다. 코드로 알아보자.
//JS
const h1 = document.createElement("h1");
h1.textContent = "Hello world";
//React
const h1 = React.createElement("h1", { children: "Hello world" });
자바스크립트는 Document.createElement()를 통해 엘리먼트 생성하고
Node.textContent()를 통해 텍스트 작성하며 이루어진 반면,
리액트는 createElement() 를 통해 작성한 방식을 확인할 수 있다.
그렇다면 appendChild는 ?
//JS
root.appendChild("h1");
//React
ReactDOM.render(h1, root);
자바스크립트가 Node.appendChild()를 통해
괄호 안의 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다고 하면,
리액트는 render()를 사용하여
첫 번째 요소(element)를 두 번째 요소(container)의 DOM에 렌더링 하고,
컴포넌트에 대한 참조를 반환한다. (?)
하지만 리액트에게는 html도 아닌 js도 아닌,, JSX라는 문법이 있다.
바벨을 사용하여 JSX 문법으로도 엘리먼트를 생성해보자.
우선 html 내부에서 사용하기 위해서는 스크립트 한 줄을 추가해줘야 한다!
이제 바벨을 통해 우리가 작성하는 코드를 자바스크립트 코드로 변환해줄 것이다.
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
그리고 script type="text/babel"으로 꼭 명시해줘야 작동한다.
const h1 = React.createElement("h1", { children: "Hello world" });
//JSX
const h1 = <h1>Hello world!!</h1>;
이렇게 리액트로 엘리먼트를 생성하고 추가하는 두가지 방법을 확인해보았다!!!!!
실제로 console.log로
자바스크립트를 통해 생성된 엘리먼트와
리액트를 통해 생성된 엘리먼트를 찍어보면 아래와 같은 결과를 확인해볼 수 있다.
console.log(h1)
//자바스크립트
<h1></h1>
//리액트
{type: "h1", key: null, ref: null, props: Object, _owner: null…}
+)
역시 ,, 토스 프론트엔드 개발자는 설명도 잘하는 것일까,,?
설명을 너무 잘해주셔서 강의를 들으니 이해가 쉽게 잘된다,,,,😢
CDN 링크 – React
A JavaScript library for building user interfaces
ko.reactjs.org
Node.appendChild() - Web API | MDN
Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는
developer.mozilla.org
ReactDOM – React
A JavaScript library for building user interfaces
ko.reactjs.org
⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :) ⚠️
*** 혹시라도 잘못된 정보가 있다면 언제든지 알려주시면 감사하겠습니다 ! ***
'JS > React' 카테고리의 다른 글
| [React] #8 리액트로 input 포커스 주기 : React.useRef() (0) | 2021.09.02 |
|---|---|
| [React] #7 리액트의 리랜더링 : Virtual DOM (0) | 2021.08.28 |
| [React] 리액트 : #5 props와 state의 차이점 ? (0) | 2021.08.24 |
| [React] 리액트 : #4 싱글 페이지 어플리케이션(SPA) (0) | 2021.08.12 |
| [React] 리액트 : #3 컴포넌트 ? (1) | 2021.08.11 |