Chapter 3
React 시작하기
React를 프로젝트에서 사용하려면 이라는 외부 웹사이트에서 두 개의 React 스크립트를 불러와야 합니다:
react는 핵심 React 라이브러리입니다.
react-dom은 DOM과 함께 React를 사용할 수 있도록 특정한 메서드를 제공합니다.
<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() 메서드를 사용하여 React에게 <h1> 제목을 #app 요소 내에 렌더링하도록 지시할 수 있습니다.
<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>이 유효한 JavaScript가 아니기 때문입니다. 이러한 코드는 JSX입니다.
JSX란 무엇인가요?
프로젝트에 Babel 추가하기
프로젝트에 Babel을 추가하려면 index.html 파일에 다음 스크립트를 복사 및 붙여넣어야 합니다:
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
또한 Babel에 어떤 코드를 변환할지 알려야 하므로 스크립트 유형을 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 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>
이전 섹션에서 작성한 명령형 JavaScript 코드:
<script type="text/javascript">
const app = document.getElementById('app');
const header = document.createElement('h1');
const text = 'Develop. Preview. Ship. 🚀';
const headerContent = document.createTextNode(text);
header.appendChild(headerContent);
app.appendChild(header);
</script>
React를 사용하면 반복적인 코드를 대부분 줄일 수 있음을 알 수 있습니다.
이것이 바로 React가 하는 일입니다. React는 재사용 가능한 코드 조각을 포함하는 라이브러리로, 여기서는 UI를 업데이트하는 작업을 대신 수행합니다.
추가 자료:
