프로젝트에서 React를 사용하려면 unpkg.com 이라는 외부 웹사이트에서 2개의 React 스크립트를 로드하면 됩니다.
- react 는 핵심 React 라이브러리입니다.
- react-dom 은 DOM과 함께 React를 사용할 수 있도록 하는 DOM 관련 메서드를 제공합니다.
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script type="text/javascript">
const app = document.getElementById('app');
ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
</script>
</body>
</html>일반 JavsScript로 DOM을 직접 조작하는 대신 react-dom의 ReactDOM.render() 메소드를 사용해서 React에 #app 요소 내에서 <h1> 태그를 렌더링 하도록 지시할 수 있다.
하지만 해당 코드로 실행하면 이런 에러를 만난다.
JSX가 뭔가요?
JSX는 친숙한 HTML과 유사한 구문으로 UI를 설명할 수 있는 자바스크립트용 구문 확장이다. JSX의 좋은 점은 다음 세 가지 규칙을 제외하고는 HTML 및 JavaScript 이외의 새로운 기호나 구문을 배울 필요가 없다.
바벨 추가하기
바벨 스크립트를 추가하고 스크립트 타입을 type=text/jsx로 변경하자.
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- Babel Script -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const app = document.getElementById('app');
ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
</script>
</body>
</html>- 선언적 작성:
<script type="text/jsx">
const app = document.getElementById("app");
ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
</script>- 이전에 했던 명령형 작성:
<script type="text/javascript">
const app = document.getElementById('app');
const header = document.createElement('h1');
const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');
header.appendChild(headerContent);
app.appendChild(header);
</script>React를 사용해 반복적인 코드를 많이 줄일 수 있는 방법을 볼 수 있다. 이것이 바로 React가 하는 일입니다.
사용자를 대신해 작업을 수행하는 재사용 가능한 코드 스니펫이 포함된 라이브러리. 이번 배운 포스팅은 UI 업데이트입니다.
'TIL' 카테고리의 다른 글
| NEXT.JS 기초편: 명령형 VS 선언적 프로그래밍 (0) | 2022.05.22 |
|---|---|
| NEXT.JS 기초편: HTML vs the DOM (0) | 2022.05.22 |
| [TIL] 모노레포 개념편 (0) | 2022.05.18 |
| [CSS] 2022 Trend @scroll-timeline (0) | 2022.03.03 |
댓글