<html>
<head>
<meta charset="utf-8">
<title>웹 게임</title>
</head>
<body>
<div id="root">
// 여기다가 LikeButton을 그린다.
</div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
▲ React 18버전 불러오는거임
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
▲ ReactDOM 18버전 불러오는거임
▼ 아래 두줄은 배포용
<!--<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>-->
<!--<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>-->
<script>
'use strict';
▼ LikeButton 컴포넌트
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = {liked: false}; ◀︎ 데이터 부분
}
render() {
if (this.state.liked) {
return 'You liked this.'; ◀︎ 화면 부분
}
return React.createElement('button', {onClick: () => this.setState({liked: true})}, 'Like'); ◀︎ 화면 부분
}
}
</script>
<script>
▼ 리액트 18버전 코드 이거 안적으면 화면에 안뜸
▼ <div id=root> 인 요소에 LikeButton 컴포넌트를 그린다.
ReactDOM.createRoot(document.querySelector('#root')).render(React.createElement(LikeButton));
▼ (참고) 리액트 17버전 코드
ReactDOM.render(React.createElement(LikeButton), document.querySelector('#root')
</script>
</body>
</html>리액트에 대한 입문자들의 착각
결국 웹 브라우저는 html, css, JavaScript 밖에 못읽는다.
특히 화면을 구성하는것은 html,css 여야하고
이에 대한 동작은 JavaScript 여야한다.
여기서 리액트 라는게 새로운 존재가 아니고
리액트도 결국은 자바스크립트일뿐이다.
자바스크립트로 html,css를 만들어낼 존재일뿐이다.
그래서 우리는 리액트로 프로그래밍을 하더라도 결과물은 html,css,JavaScript가 나와야지만
브라우저가 파일들을 읽고 화면을 표시해줄수 있다.
리액트로 개발하는 방식은 크게 2가지
1. Class 방식 - 99% 거의 안쓰인다. 1% ErrorBoundary에서 쓴다. (그래도 기본기라 익혀놔야한다.)
2. 함수 방식 (+ Hooks)
리액트는 자바스크립트 코드를 작성을하는데 자바스크립트 코드가 화면도 그려주고,css도 입혀준다.
사실상 JavaScript로 HTML,CSS,JavaScript 전부를 다 컨트롤하는것이다.
위 코드블럭에서 class LikeButton을 컴포넌트라고 부른다.
컴포넌트란?
데이터와 화면을 하나로 묶어둔 덩어리
데이터 - state 부분
화면 - render return 부분
🌈 리액트가 해결하고자 하는 부분 : 데이터와 화면의 일치
리액트는 데이터가 바뀌면 화면이 자동으로 바뀌게 되어있다.
간단하게는 화면에 바뀌는부분은 state로 만든다.
🔥 명심해야할것
1. 리액트는 자바스크립트이다. (리액트는 자바스크립트로 HTML, CSS를 만들어낼 존재일 뿐이다.)
2. 리액트는 데이터중심으로 움직인다. (데이터가 바뀌면 화면도 따라서 바뀐다.)
'Front end > React' 카테고리의 다른 글
| 클래스 컴포넌트의 형태와 리액트 데브툴즈 (0) | 2023.04.08 |
|---|---|
| 가독성을 위한 JSX (0) | 2023.04.08 |
| 리액트 array, object state 변경하는 법 (0) | 2023.04.06 |
| 리액트 useState (2) (0) | 2023.04.06 |
| 리액트 useState (1) (0) | 2023.03.31 |
