Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"
- Colaboratory 글자 깨짐
- Spring-Framework
- DB Browser
- 타자 게임 만들기
- intllij 내 Bean을 찾지 못해서 발생하는 오류
- ReactDOM.render is no longer supported in React 18. Use createRoot instead
- 모던자바스크립트
- googleColaboratory
- vs code 내 node
- node.js로 로그인하기
- 자바스크립트
- react
- 노드에 리액트 추가하기
- intellij
- 모두의 파이썬
- 인프런
- props
- Do it 자바스크립트 + 제이쿼리 입문
- 거북이 대포 게임
- 계산맞추기 게임
- react오류
- JS 개념
- spring-boot
- Python
- 따라하며 배우는 노드 리액트 기본 강의
- node.js 설치
- 리액트
- Concurrently
- 웹 게임을 만들며 배우는 리액트
Archives
- Today
- Total
프로그래밍 삽질 중
[웹 게임을 만들며 배우는 React] - 구구단 본문
1. 클래스형 컴포넌트 : state 사용 위함
class GuGudan extends React.component {}
2. state
- 변화하는 데이터를 처리할 때 state(상태)를 사용
- state는 변화하는 데이터를 저장하는 것
class GuGuDan extends React.Component {
constructor(props) {
super(props)
this.state = {
num1: Math.ceil(Math.random() * 9),
num2: Math.ceil(Math.random() * 9),
value: '',
result: '',
win: 0,
}
}
3. render
- render 함수 안에서 javascript 코드와 XML을 작성해 화면을 만들겠다 설정
render() {
return (
<>
<h1>{this.state.num1} 곱하기 {this.state.num2} 은?</h1>
<form onSubmit={this.onSubmit}>
<input type="number" value={this.state.value} onChange={this.onChange} />
<button>submit</button>
</form>
<h3>{this.state.result}</h3>
<h4>{this.state.win} 연속 정답!</h4>
</>
)
}
4. ReactDom.render
- render 함수에서 무엇을 만들 것인지 언급했다면 ReactDom.render에서 render에서 사용할 코드 작성
- 웹에다가 실제로 렌더링 해주는 역할
// ReactDOM.render(<클래스명 />, 컴포넌트가 들어갈 곳);
<script type="text/babel">
ReactDOM.render(<GuGuDan />, document.querySelector("#root"));
</script>
5. 렌더링
- <form onSubmit={this.onSubmit}>에서 바로 함수를 만들지 않고 클래스에 따로 정의한 다음 사용
- setState : 상태를 설정할 때 사용, 사용 시 render 함수가 다시 실행됨
- 만약 render 함수에 함수를 그대로 넣으면 render 함수가 실행될 때마다 함수가 계속 생성됨
(따라서 클래스 안에 함수를 정희하고 사용함)
6. React.Fragment
- 리액트가 처음 생겼을 때 무조건 <div></div>태그를 썼어야 하지만 시간이 지날수록 불편해짐
- <React.Frament></React.Fragment> 사용 시 필요 없는 <div></div> 태그를 피할 수 있음
render() {
return (
<React.Fragment>
<h1>{this.state.num1} 곱하기 {this.state.num2} 은?</h1>
<form onSubmit={this.onSubmit}>
<input type="number" value={this.state.value} onChange={this.onChange} />
<button>submit</button>
</form>
<h3>{this.state.result}</h3>
<h4>{this.state.win} 연속 정답!</h4>
</React.Fragment>
)
}
* 전체 코드
더보기
<html>
<head>
<meta charset="utf-8" />
<title>구구단</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- react가 동작하는 핵심적인 코드가 존재 -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js">
</script>
<!-- react코드를 웹에다가 붙여주는 역할 -->
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const e = React.createElement; // HTML 태그를 만들어주는 함수
class GuGuDan extends React.Component {
constructor(props) {
super(props)
this.state = {
num1: Math.ceil(Math.random() * 9),
num2: Math.ceil(Math.random() * 9),
value: '',
result: '',
win: 0,
result2: ''
}
}
onSubmit = (e) => {
e.preventDefault();
const answer = this.state.num1 * this.state.num2;
const cur_win = this.state.win;
if (parseInt(this.state.value) === answer) {
//parseInt : 자료를 int형으로 변환
//예전 state값으로 새로운 state를 만들 때는 새로운 함수를 씀
this.setState((prevState) => {
return {
num1: Math.ceil(Math.random() * 9),
num2: Math.ceil(Math.random() * 9),
value: '',
// result: `${prevState.value} 정답!`,
result: `정답! ${this.state.num1} * ${this.state.num2} = ${this.state.value}`,
win: cur_win + 1,
}
})
}
else {
this.setState({
value: '',
result: `오답...`,
win: 0
})
}
}
onChange = (e) => {
console.log(e);
this.setState({ value: e.target.value });
};
render() {
return (
<React.Fragment>
<h1>{this.state.num1} 곱하기 {this.state.num2} 은?</h1>
<form onSubmit={this.onSubmit}>
<input type="number" value={this.state.value} onChange={this.onChange} />
<button>submit</button>
</form>
<h3>{this.state.result}</h3>
<h4>{this.state.win} 연속 정답!</h4>
</React.Fragment>
)
}
}
function Test() {
return <h1>test</h1>
}
</script>
<script type="text/babel">
// 웹에다가 실제로 렌더링 해주는 역할, LikeButton을 root 태그에 붙임
ReactDOM.render(<GuGuDan />, document.querySelector("#root"));
</script>
</body>
</html>
'과거 프로그래밍 자료들 > React' 카테고리의 다른 글
[웹 게임을 만들며 배우는 React] - 웹팩 데브 서버, 핫 리로딩 (0) | 2022.09.27 |
---|---|
[웹 게임을 만들며 배우는 React] - Hoonks, 웹팩 (0) | 2022.09.27 |
kakao login notnull violation: user.email cannot be null 해결법 (0) | 2022.08.26 |
[러닝리액트 2판] 3장 자바스크립트를 활용한 함수형 프로그래밍 1 (0) | 2022.06.09 |
React로 좋아요 버튼 누르기(1) - mongoDB users에 정보 담기 (0) | 2022.05.26 |