💻 참고 영상 : https://www.youtube.com/watch?v=e-ZeEi6ABFY
CDN으로 리액트 사용해보기
리액트 초보 개발자라면 아마 CRA로 설치해서 사용하는 것이 익숙할 것이다. 물론 나 또한 그렇게 대부분의 개발자들이 CRA를 사용할 것이다. 왜? 편하니까.
근데 사실 리액트는 CDN으로 불러와서 사용해볼 수도 있다. 이게 처음에는 꽤나 낯설것이다. 근데 보다보면 어 이게 되네? 라는 신기한 느낌을 받을 것이다. 내가 그랬기 때문에.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- https://ko.reactjs.org/docs/cdn-links.html -->
<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>
<title>React</title>
</head>
<body>
<div id="root"></div>
<script>
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
}
render() {
return e("button", null, "Like"); // <button>Like</button>
}
}
</script>
<script>
ReactDOM.render(e(LikeButton), document.querySelector("#root"));
</script>
</body>
</html>
리액트가 대단한 것이 아니라 그저 UI 라이브러리라고 보면 될 거 같다. jquery 대신 리액트를 사용할 수 있고, 같이 사용할 수도 있을 것이다.
CRA로 리액트를 사용해봤다면 알겠지만 형태 자체는 꽤나 동일하다. LikeButton이 하나의 컴포넌트라고 보면 될 거 같고, 거기서는 Like라는 버튼을 렌더링하고 있다. 그리고 최종적으로 #root에다가 LikeButton을 그려주는 것이다. 결과를 보면 알겠지만 진짜로 Like 버튼이 생성되었다.
이런식으로 간단하게 리액트를 사용해볼 수 있다는 것에 대해 처음 배웠을때는 조금 놀랐었다.
state와 이벤트 리스너
이번에는 버튼을 눌렀을때 onClick 이벤트를 처리하는 리스너를 만들고, 상태(state)를 변경시켜보자. 그리고 변경된 상태를 통해 버튼에 text를 바꿔보자.
<script>
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = {
liked: false,
};
}
render() {
return e(
"button",
{
onClick: () => {
this.setState({ liked: true });
},
type: "submit",
},
this.state.liked === true ? "Liked" : "Like"
);
}
}
</script>
상태를 통해 DOM을 바꾼다는 사실이 리액트이며 꽤나 신기하게 느껴져야 한다. 기존 제이쿼리를 사용했다면 직접 조작해야했던것이 리액트에서는 상태를 통해 자동으로 바뀌니 말이다.
JSX와 바벨(Bable)
이번에는 JSX를 사용해보자. 위와 같은 방식은 너무 불편했다. 따라서 JS안에 html 비슷하게 사용할 수 있는 문법이 생겨났는데 그게 바로 JSX이다.
하지만 그냥은 사용할 수 없고 bable을 같이 사용해야 한다. 왜냐면 원칙적으로 JS안에 저런 문법을 사용할 수 없는 새로운 형태이기 때문... 그리고 이를 bable이 다시 JS로 변환해줘야 한다. 그 형태가 아마 위와 같은 형태일 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
...
<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@6/babel.min.js"></script>
<title>React</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = {
liked: false,
};
}
render() {
return (
<button onClick={() => this.setState({ liked: true })}>
{this.state.liked === true ? "Liked" : "Like"}
</button>
);
}
}
</script>
<script type="text/babel">
ReactDOM.render(<LikeButton />, document.querySelector("#root"));
</script>
</body>
</html>
완전히 리액트 같은 형태가 된 것을 볼 수 있다. 참 신기하지 않은가? 아~ 다음 시간에는 웹팩에 대해서 공부해야겠다. 그럼 ㅂㅇ
