React로 시작하기
프로젝트에서 React를 사용하려면, react와 react-dom 두 개의 React 스크립트를 외부 웹사이트인 unpkg.com에서 불러올 수 있습니다.
- react는 핵심 React 라이브러리입니다.
- react-dom은 DOM과 관련된 메서드를 제공하여 DOM과 함께 React를 사용할 수 있게 해줍니다.
<!-- 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');
</script>
</body>
</html>
순수 JavaScript로 DOM을 직접 조작하는 대신에, react-dom에서 ReactDOM.render() 메서드를 사용하여 <h1> 타이틀을 #app 요소 내에 렌더링하도록 React에 알릴 수 있습니다.
<!-- 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>
그러나 이 코드를 브라우저에서 실행하려고 하면 구문 오류가 발생합니다.
이는 <h1>...</h1>이 유효한 자바스크립트가 아니라는 것을 의미합니다. 이 코드 조각은 JSX입니다.
JSX란 무엇인가요?
JSX는 자바스크립트의 구문 확장으로, 익숙한 HTML과 유사한 구문으로 UI를 설명할 수 있게 해줍니다. JSX의 좋은 점은 세 가지 JSX 규칙을 따르는 것 외에도 HTML과 자바스크립트 외에는 새로운 기호(symbols)나 구문(syntax)을 배울 필요가 없다는 것입니다.
브라우저는 기본적으로 JSX를 이해하지 못하므로, JSX 코드를 일반 자바스크립트로 변환해주는 Babel과 같은 자바스크립트 컴파일러가 필요합니다.
프로젝트에 Babel 추가하기
Babel을 프로젝트에 추가하려면 다음 스크립트를 index.html 파일에 복사하여 붙여넣으세요:
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
또한 Babel에 어떤 코드를 변환할지 알려주기 위해 script 타입을 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>
그런 다음 브라우저에서 코드를 실행하여 제대로 작동하는지 확인할 수 있습니다.
방금 작성한 선언적 React 코드
<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를 업데이트하는 작업입니다.
Note: React가 UI를 업데이트하는 방식을 정확히 알 필요는 없지만, 더 자세히 알고 싶다면 React 문서의 UI 트리 및 react-dom/server 섹션을 살펴보세요.
'Dev > Next JS' 카테고리의 다른 글
| [공식문서] JavaScript에서 React로 #5 (0) | 2023.08.11 |
|---|---|
| [공식문서] JavaScript에서 React로 #4 (0) | 2023.08.11 |
| [공식문서] JavaScript에서 React로 #2 (0) | 2023.08.10 |
| [공식문서] JavaScript에서 React로 (0) | 2023.08.10 |
| [공식문서] Next.js 란 무엇인가? (0) | 2023.08.10 |
