[React] 튜토리얼 자습하기 (1)
Lpla
·2021. 9. 24. 22:46
반응형
설치하기
a. 웹사이트에 React 추가하기
(1) 1분 내로 React 추가하기
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>1분 내로 React 추가하기</title>
</head>
<body>
<h2>1분 내로 React 추가하기</h2>
<!-- React 컴포넌트가 들어갈 요소 -->
<div id="like_button_container"></div>
<!-- React 스크립트 -->
<!-- 배포판에서는 "development.js" 대신 "production.min.js" 를 입력 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- React 컴포넌트 불러오기 -->
<script src="like_button.js"></script>
</body>
</html>
javaScript
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return '좋아요를 클릭하셨습니다.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'좋아요'
);
}
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
문법은 추후에 다룬다.
여기서는 이 방식으로 React를 사용할 수 있다는 것만 기억하면 된다.
(2) JSX로 React 사용하기
Vanilla(Pure) javaScript에서 React를 사용하는 것은 불편하다.
html으로 손쉽게 만들 수 있었던 UI를 javaScript로 만들어야 한다고 생각하면 왜 그런지 감이 온다.
JSX를 사용하면 html과 유사한 형태로 UI를 코딩할 수 있다.
JSX는 javaScript의 확장 문법이지만 웹에서 동작하는 언어는 아니기 때문에 작성은 JSX로 하되 최종적으로 javaScript로 컴파일 하는 과정이 필요하다.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<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>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<>
<h1>Hello, world!</h1>
<h2>html에서 하던 작업처럼 jsx에서 작업할 수 있다.</h2>
</>,
document.getElementById('root')
);
</script>
</body>
</html>
하지만 실제로 위 방식으로 JSX를 사용하는 경우는 거의 없다.
일반적으로 터미널에서 JSX 전처리기를 설치하여 사용한다.
터미널을 한 번도 다뤄보지 못했다면 여기서 멈추고 사용법을 익힌 다음에 작업해야 한다.
(3) jsx 전처리기 실행하기
npm init -ynpm install babel-cli@6 babel-preset-react-app@3
여기까지 실행하면 pakage.json 과 node_modules폴더가 생성된다.
이제 src폴더를 만들고 JSX문법으로 구성된 js파일을 추가한다.
이것을 vanilla javaScript로 컴파일 하기 위해서는 아래 명령어를 실행한다.
npx babel --watch src --out-dir . --presets react-app/prod이 명령어는 한 번 입력하고 끝나는 것이 아니라 사용자의 src폴더를 계속 감지하여 변화가 생길 때마다 vanilla javaScript로 컴파일한다.
src/like_button.js
'use strict';
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return (
<button onClick={() => this.setState({ liked: true }) }>
Like
</button>
);
}
}
let domContainer = document.querySelector('#like_button_container');
ReactDOM.render(<LikeButton />, domContainer);
like_button.js
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var LikeButton = function (_React$Component) {
_inherits(LikeButton, _React$Component);
function LikeButton(props) {
_classCallCheck(this, LikeButton);
var _this = _possibleConstructorReturn(this, (LikeButton.__proto__ || Object.getPrototypeOf(LikeButton)).call(this, props));
_this.state = { liked: false };
return _this;
}
_createClass(LikeButton, [{
key: 'render',
value: function render() {
var _this2 = this;
if (this.state.liked) {
return 'You liked this.';
}
return React.createElement(
'button',
{ onClick: function onClick() {
return _this2.setState({ liked: true });
} },
'Like'
);
}
}]);
return LikeButton;
}(React.Component);
var domContainer = document.querySelector('#like_button_container');
ReactDOM.render(React.createElement(LikeButton, null), domContainer);
b. 새로운 React 앱 만들기
React 팀은 아래와 같은 툴체인을 추천한다.
React를 배우고 있거나 새로운 싱글 페이지 앱을 만들고 싶다면 Create React App
서버 렌더링 Node.js 웹사이트를 만들고 있다면 Next.js
고정적인 콘텐츠 지향적 웹사이트를 만들고 있다면 Gatsby
컴포넌트 라이브러리 혹은 이미 있는 코드 베이스에 통합 한다면 Neutrino, Nx, Parcel, Razzle 등
나는 Create React App만을 배운다.
참고로 위에서 언급한 싱글 페이지 앱이란 하나의 html 페이지를 사용하여 페이지 로드 없이 콘텐츠를 보여주는 형태를 말한다.
Create React App의 설치법은 아래와 같다.
npx create-react-app my-appcd my-appnpm start
npm start 까지 입력하고 아래 화면이 뜬다면 정상적으로 실행된 것이다.
반응형
