> For the complete documentation index, see [llms.txt](https://wontory.gitbook.io/next.js-journey/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wontory.gitbook.io/next.js-journey/react-foundations/docs/chapter-3.-getting-started-with-react.md).
# Chapter 3. Getting Started with React
Chapter 3
## React 시작하기
React를 프로젝트에서 사용하려면 [unpkg.com](https://unpkg.com/)이라는 외부 웹사이트에서 두 개의 React 스크립트를 불러와야 합니다:
* **react**는 핵심 React 라이브러리입니다.
* **react-dom**은 DOM과 함께 React를 사용할 수 있도록 특정한 메서드를 제공합니다.
```html
```
일반적인 JavaScript로 DOM을 직접 조작하는 대신, `react-dom`에서 제공하는 `ReactDOM.render()` 메서드를 사용하여 React에게 `` 제목을 `#app` 요소 내에 렌더링하도록 지시할 수 있습니다.
```html
```
그러나 이 코드를 브라우저에서 실행하려고 하면 구문 오류가 발생합니다:
이것은 `...
`이 유효한 JavaScript가 아니기 때문입니다. 이러한 코드는 JSX입니다.
#### JSX란 무엇인가요?
JSX는 JavaScript의 구문 확장으로, 익숙한 HTML과 유사한 구문을 사용하여 UI를 설명할 수 있게 해줍니다. JSX의 좋은 점은 [JSX 규칙 세 가지](https://react.dev/learn/writing-markup-with-jsx#the-rules-of-jsx)을 따르는 것 외에도 HTML과 JavaScript 외에는 새로운 기호나 구문을 배울 필요가 없다는 것입니다.
브라우저는 JSX를 기본적으로 이해하지 않으므로 JSX 코드를 일반 JavaScript로 변환하기 위해 [Babel](https://babeljs.io/)과 같은 JavaScript 컴파일러가 필요합니다.
#### 프로젝트에 Babel 추가하기
프로젝트에 Babel을 추가하려면 `index.html` 파일에 다음 스크립트를 복사 및 붙여넣어야 합니다:
```html
```
또한 Babel에 어떤 코드를 변환할지 알려야 하므로 스크립트 유형을 `type=text/jsx`로 변경해야 합니다.
```html
```
그런 다음 브라우저에서 코드를 실행하여 올바르게 작동하는지 확인할 수 있습니다.
방금 작성한 **선언적** React 코드 비교:
```html
```
이전 섹션에서 작성한 **명령형** JavaScript 코드:
```html
```
React를 사용하면 반복적인 코드를 대부분 줄일 수 있음을 알 수 있습니다.
이것이 바로 React가 하는 일입니다. React는 재사용 가능한 코드 조각을 포함하는 라이브러리로, 여기서는 UI를 업데이트하는 작업을 대신 수행합니다.
> **참고**: React가 UI를 어떻게 업데이트하는지 정확히 알 필요는 없지만 더 알고 싶다면 React 문서의 [UI trees](https://react.dev/learn/preserving-and-resetting-state#the-ui-tree)와 [react-dom/server](https://react.dev/reference/react-dom/server) 섹션을 살펴보세요.
> 추가 자료:
>
> * [JSX로 마크업 작성하기](https://react.dev/learn/writing-markup-with-jsx)