제로초님의 리액트 강의를 보고 기억하기 위해 정리한 내용입니다.
https://www.inflearn.com/course/web-game-react
#1-1
리액트는 js파일
npm 패키지를 사용하지 않고도 html 파일에 컴포넌트를 생성할 수 있다.
<html>
<head>
<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>
<!-- react 코드를 웹에다가 붙여주는 역할 -->
</head>
<body>
<div id="root"></div>
<!--실행결과 : <div id="root"><button>like</button>-->
<script>
const e = React.createElement; // HTML 태그를 만들어주는 함수
class LikeButton extends React.Component {
constructor(props) {
// Component가 처음 실행될 때 가장 먼저 실행되는 부분
super(props);
}
render() {
// 해당 클래스가 화면에 어떻게 표시할지 결정하는 method
return e('button', null, 'Like') // <button>Like</button>
} // 두번째 자리 : methods 작성하는 곳
}
</script>
<script>
// 웹에다가 실제로 렌더링 해주는 역할(화면에 반영), LikeButton을 root 태그에 붙임
ReactDOM.render(e(LikeButton), document.querySelector("#root"));
</script>
</body>
</html>onclick과 같은 메소드를 사용해보자
render(){
return e('buuton', {onClick: () => { console.log('clicked')}, type: 'submit' }
}여기서 속성은 camel case로 작성한다
onclick -> onClick
1-4 jsx, babel
jsx, babel
<html>
<head>
<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 태그를 만들어주는 함수
classs LikeButton extends React.Component{
constructor(props){
//Component가 처음 실행될 때 가장 먼저 실행되는 부분
super(props);
this.state = {
liked: false
};
}
handleClick(){
alert("clicked!");
}
render(){
return(
<button type="submit"
onClick={() => {this.setState({liked : true})}}>
{this.state.liked === true ? 'Liked' : 'Like'}
</button>);
}
}
</script>
<script type="text/babel">
// 웹에다가 실제로 렌더링 해주는 역할, LikeButton을 root 태그에 붙임
ReactDOM.render(<div><LikeButton /><LikeButton /><LikeButton /> </div>, document.querySelector("#root"));
</script>
</body>
</html>중괄호 안에서 자바스크립트 코드를 작성할 수 있다.
jsx
자바스크립트의 확장판 개념, html + 자바스크립트 작성이 가능하다
사용하기 위해서는 babel이라는 컴파일러를 사용해야 한다
head에서 스크립트를 가져오고 script에서 type="text/babel"을 작성해야 사용가능하다.
#1-5 구구단 예제
state(구구단)
<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.stata = {
num1 : Math.ceil(Math.random() * 9),
num2 : Math.ceil(Math.random() * 9),
value : '',
result : '',
//Math.ceil() : 양수는 올림, 음수는 내림
//Math.random() : 0부터 1중의 난수
}
}
onSubmit = (e) => {
e.preventDefault();
const answer = this.state.num1 * this.state.num2;
if(parseInt(this.state.value) === answer){
this.setState({
num1 : Math.ceil(Math.random() * 9),
num2 : Math.ceil(Math.random() * 9),
value : '',
result : '정답!',
})
}
}
onChange = (e) => {
this.setState({value: e.target.value});
};
render() {
<div>
<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>
</div>
)
}
}
funtion Test(){
return <h1>test</h1>
}
</script>
<script type="text/babel">
// 웹에다가 실제로 렌더링 해주는 역할, LikeButton을 root 태그에 붙임
ReactDOM.render(<GuGuDan/>, document.querySelector("#root"));
</script>
</body>
</html>
바뀌는 값들은 state
html태그인 onClick,onChange를 클래스 내부의 메소드로 호출하게끔
페이지가 새로 고침하는 것을 막기 위한 e.preventDefault();
🎱 여기서의 e는 React.createElement가 아니라 해당 이벤트를 가리킨다. 즉 onSubmit을 호출한 form태그 자체와 onChange를 호출한 input태그를 각각 가리키는 것
정답일 시 값 초기화, 문제초기화와 정답 출력
꾸준하기 위해 기록하는 개발자의 개발 일기