React Study [#1] - 구구단
제로초님의 "웹 게임을 만들며 배우는 React"을 보고 학습하는 스터디 입니다.
React란 무엇인가 + React를 쓰는 이유
- 사용자 인터페이스를 만들기 위해서
- 싱글 페이지 어플리케이션을 위해서
- 데이터 처리를 용이하게 하기 위해서
- 재활용 가능한 웹 컴포넌트를 위해서
첫 리액트 컴포넌트
<!DOCTYPE html>
<html lang="ko">
<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">
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<title>React Web Game Tutorial</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>
if (typeof window !== 'undefined') {
window.React = React;
}
// 우리가 만들겠다고 했던 것을 실제로 웹 화면에다가 랜더링 해준다.
ReactDOM.render(e(LikeButton), document.querySelector('#root'))
</script>
</body>
</html>HTML 속성과 상태 (state)
// 생성자
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',);
} Jsx와 Babel(babel)
- JSX란 (JS + XML)
- Babel이란 바벨은 ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환 시켜 IE나 다른 브라우저에서 동작할 수 있도록 하는 역할을 한다.
ex) javascript에서는 return <button></button> 같은 문법을 지원해주지 않기 때문에 Babel을 사용함.
구구단 리액트로 만들기
<!DOCTYPE html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root">
<script type="text/babel">
const GuGuDan = () => {
// useState로 상태 관리 (랜덤 값 설정 1-9)
const [first, setFirst] = React.useState(Math.ceil(Math.random()*9));
const [second, setSecond] = React.useState(Math.ceil(Math.random()*9));
// value와 result 첫 설정
const [value, setValue] = React.useState('');
const [result, setResult] = React.useState('');
const inputRef = React.useRef(null);
const onChangeInput = (e) => {
setValue(e.target.value);
}
const onSubmitForm = (e) => {
e.preventDefault();
if(parseInt(value) === first * second) {
setResult('정답: '+value);
setFirst(Math.ceil(Math.random()*9));
setSecond(Math.ceil(Math.random()*9));
setValue('');
// input에 focus 주기
inputRef.current.focus();
} else {
setResult('땡');
setValue('');
// input에 focus 주기
inputRef.current.focus();
}
}
return (
<React.Fragment>
<div> {first} * {second} = ?</div>
<form onSubmit={onSubmitForm}>
<input ref={inputRef} onChange={onChangeInput} value={value}/>
<button>입력</button>
</form>
<div>{result}</div>
</React.Fragment>
);
}
</script>
<script type="text/babel">
ReactDOM.render(<GuGuDan/>, document.querySelector("#root"));
</script>
</div>
</body>
</html>
현실에 안주하지 않고 - 개발자