USe React, ReactDOM Library with CDN
리액트를 사용하는 방법은 여러 가지가 있는데 그 중에서 가장 대충하는 방법에 대해서 실습해볼 예정이다.
CDN을 통해서 리액트 라이브러리를 사용해보자. 라이브러리를 링크로 처리하는 것인데, 라이브러리를 우리의 컴퓨터, 즉 로컬에 두는 방법이 있고, 우리의 서버에 두지 않고 네트워크 서비스를 이용하는 방법이 있다. CDN을 사용하는 것은 후자에 해당한다.
React 공식 홈페이지에서 제공하는 CDN Links를 가져온다.
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>실습할 폴더와 그 안에 html 파일을 생성한 후 위의 링크를 붙여넣는다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello</h1>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</body>
</html>이제 ReactDOM을 이용해 render를 해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello</h1>
<div id="root">
</div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script>
// 컴포넌트를 만드는 방법
const Component = () => React.createElement('p', null, '안녕하세요');
ReactDOM.render(
// 리액트 컴포넌트(컴포넌트를 넣을때 이렇게 넣어야한다.),
React.createElement(Component, null, null),
document.querySelector('#root');
);
</script>
</body>
</html>리액트로 컴포넌트를 만들고 렌더까지 해봤는데 고작 "안녕하세요" 하나 넣는 것만 해도 복잡하다.
만약 다음과 같은 html을 추가한다고 생각하면 더 복잡해진다.
<div>
<h1>목록</h1>
<ul>
<li>자바스크립트</li>
<li>타입스크립트</li>
</ul>
</div>이렇게 코딩을 해야됐다면 react가 널리 퍼지지 않았을 것이다. 이를 편하게 해주려고 등장한게 바로 JSX 이다.
JSX는 html처럼 생긴 javascript 확장 문법이다. 우리가 JSX로 작성한 코드를 바벨 혹은 타입스크립트를 통해 위에서 봤던 React.createElement()로 바꿔준다. 그런데, 코드를 쓸때마다 바벨로 변환하는 것은 너무 귀찮은 일이다. 따라서 임시로 바벨을 끌어올 수 있는 기능을 바벨이 지원하는데 이를 사용해보자.
babel 홈페이지에서 setup => in the browser => Usage
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>html 에 추가해준 후,
<script type="text/babel">
const Component = () => (
<div>
<h1>목록</h1>
<ul>
<li>자바스크립트</li>
<li>타입스크립트</li>
</ul>
</div>
);
ReactDOM.render(<Component />, document.querySelector('#root'));
</script> type="text/babel"을 추가해준다. 이렇게 하면 script 태그 안에 있는 코드는 실행되기전에 바벨이 컴파일한 후 실행된다. 아까 코드보다 JSX를 이용한 코드가 더 깔끔하고 보기 좋다.
이렇게 react 라이브러리를 사용할 수 도 있지만 create-react-app을 통해 쉽게 사용할 수도 있다.
$ npx create-react-app 디렉토리 이름이렇게 해서 만들어진 파일은 기본적인 환경설정이 이미 되어있다. 위처럼 react CDN을 가져올 필요도, babel을 가져올 필요도 없이 바로 실행될 수 있다. 편리하긴 하지만 기본적으로 react 라이브러리를 어떻게 설정하는지 알아야 할 필요가 있기 때문에 위의 방법도 잘 알아두도록 하자.
