-
[Next.js Learn 문서 번역 #2] From JavaScript to React (React와 JSX)Frontend 2022. 5. 29. 23:36
https://unsplash.com/photos/ouVQwCBlQ9E Next.js Learn 문서 일부분에 대한 한글 번역입니다.
[원문 링크]
From JavaScript to React (JavaScript에서 React까지) #2
여러분의 프로젝트에 리액트를 사용하기 위해서는 unpkg.com이라고 불리는 외부 웹사이트로부터 두 개의 리액트 스크립트를 로드할 수 있다.
- react는 리액트 코어 라이브러리이다.
- react-dom은 리액트를 DOM과 함께 사용할 수 있도록 만들어주는 DOM에 특화된 method를 제공해준다.
const app = document.getElementById('app');순수 자바스크립트로 DOM을 직접 조작하는 대신, 여러분은 react-dom의 ReactDOM.render() 메소드를 사용하여 리액트가 #app 엘리먼트 안에 <h1>을 렌더하도록 할 수 있다.
const app = document.getElementById('app'); ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);그러나 여러분이 위 코드를 브라우저에서 실행하려고 하면, 다음과 같은 syntax 에러를 만나게 될 것이다:
왜냐면 <h1>…</h1>이 유효한 자바스크립트가 아니기 때문이다. 이것은 JSX 코드 조각일 뿐이다.
What is JSX? (JSX란 무엇인가?)
JSX는 여러분이 UI를 HTML과 유사한 문법으로 설명할 수 있도록 만들어주는 자바스크립트를 위한 syntax extentsion(문법 확장팩)이다. JSX의 좋은 점은 다음 3가지 JSX 문법을 제외하고, HTML이나 자바스크립트 이외의 새로운 부호나 문법을 배울 필요가 없다는 것이다.
브라우저는 JSX를 이해하지 못하기 때문에 JSX 코드를 일반적인 자바스크립트로 변환하기 위해서는 Babel과 같은 자바스크립트 컴파일러를 필요로 한다.
Adding Babel to your project (프로젝트에 Babel 추가하기)
Babel을 프로젝트에서 사용하려면 다음 스크립트를 복사 붙여넣기 하여 index.html 파일에 넣는다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>덧붙여, script 태그의 타입을 type=text/jsx로 바꿔서 어떤 코드를 변환할 지 Babel에게 알려줄 필요도 있다.
<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>Quick Review
왜 리액트 코드는 컴파일되어야 하는가?
더보기⇒ 리액트가 JSX를 사용하기 때문에 자바스크립트로 컴파일되어야 한다.
반응형'Frontend' 카테고리의 다른 글
COMMENT