React 시작하기 | React

React 시작하기

---

새로 만든 프로젝트에서 React를 사용하기 위해서는 unpkg.com 에서 2개의 React 스크립트를 로드해야 합니다.

• react
  https://www.unpkg.com/browse/react@18.3.1/
  React 라이브러리 core
• react-dom
  https://www.unpkg.com/browse/react-dom@18.3.1/
  DOM에서 React를 사용할 수 있게 해주는 DOM 관련 메소드 제공

 

Javascript로 직접 DOM을 수정하지 않을 것이므로 기존에 추가했던 DOM 메소드를 삭제합니다.

특정 요소를 타겟팅하고 표시할 React 컴포넌트를 추가하기 위해 ReactDom.createRoot() 를 추가하고,

root.render() 메소드로 React 코드를 DOM에 랜더링합니다.

<!-- React 로드 -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- React Dom 로드 -->
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<script>
	const app = document.getElementById("app");
    const root = ReactDOM.createRoot(app);
    root.render(<div>Dev</div>);
</script>

 

---

JSX란? What is JSX?

JSX는 UI를 HTML과 비슷한 구문으로 작성할 수 있게 해주는 Javascript 확장 구문입니다.

Javascript의 일부분이라서 새로운 구문을 배울 필요가 전혀 없다는 것이 큰 장점이죠.

 

하지만 브라우저는 JSX 문법을 이해할 수 없어서 babel 등의 컴파일러를 사용해 일반적인 Javascript로 변환해야 합니다.

 

프로젝트에 Babel 추가하기 Adding Babel to your project

unpkg.com 에서 babel script를 로드합니다.

https://unpkg.com/browse/babel-standalone@6.26.0/

JSX 구문의 script type은 "text/jsx"로 선언합니다.

<!-- babel 로드 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!-- JSX 구문 -->
<script type="text/jsx">
	...
</script>

 

💡Javascript와 React를 동시에 학습할 수는 있지만, Javascript에 익숙해지는 것이 React를 더 쉽게 배울 수 있습니다.

 

 

React Foundations: Getting Started with React | Next.js