공부자료 : https://www.inflearn.com/course/web-game-react
https://ko.reactjs.org/docs/add-react-to-a-website.html

리액트

리액트란?

• 사용자 인터페이스를 만들기 위한 JS 라이브러리

사용이유?

• 사용자 경험
• 재사용 컴포넌트
• 데이터-화면 일치

첫번째 리액트 컴포넌트

1.HTML 파일에 DOM 컨테이너 설치

<div id="root></div>

• 이 <div> 태그에 유일한 HTML 속성인 id를 부여

2.스크립트 태그 추가하기

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

개발 연습할 땐 development.js
실제 배포할 땐 production.min.js

3. 리액트 컴포넌트 만들기

• createElement : 태그만들기
• 리액트 안에 컴포넌트가 들어있고 그걸 상속해옴(extends)

class LikeButton extends React.Component{
	//컴포넌트가 처음에 실행될 때 제일 먼저 실행됨.
	constructor(props) {
		super(props);
	}
	//like버튼 안에 렌더가 좋아요 버튼을 어떻게 표현할 것인지
	render(){
		return e('button', null, 'Like');
		//<button>Like</button> 버튼을 만들겠다.
	}
}

• Like버튼 그리기위해 스크립트 하나 더

ReactDOM.render(e(LikeButton), document.querySelector('#root'));

결과

• Like 버튼이 만들어짐
  
  
• 리액트는 컨포넌트들을 렌더링할 root가 필요하고
• return에 버튼의 속성을 추가해줌

속성

render(){
  return e('button',null, 'Like');
}

렌더 부분에서 버튼의 속성을 바꿔줌

• {onClick:() => { console.log('clicked')}, type:'submit' }
  : Like 버튼을 만들겠다. 콘솔창에 클릭할때마다 횟수가 추가
• 상태는 바뀔 수 있는 부분이다. ex) 버튼의 'like'가 누르면 'liked'로 변하는

웹팩 안 쓰니까 비효율적인 코드들.

JSX

• JS + XML
• js에서 html의 문법을 읽어주지 못하기 때문에 바벨을 이용해서 읽음
• 헤드에
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  추가
• script 태그에 속성을 type="text/babel" 해줌
• 재사용이 가능해짐

💬

ReactDOM.render(<div><LikeButton />
                <LikeButton />
                <LikeButton /></div>, document.querySelector('#root'));

📝
버튼을 한번씩 눌렀을 때의 결과임

구구단 게임 만들기

1. js 파일에서 바뀌는 상태들 정의

• 1x2라면 1과 2만 바뀌고, textbox와 정답인지 확인해주는 text만 바뀜
• this.state에서 바뀌는 상태들의 변수를 만들어줌.

2. render에 이제 대입

• {}를 쓰면 js를 쓸 수 있음
• return에 <div>에 삽입
• <div>{this.state.first}곱하기{this.state.second}는?</div>
  : 문제 설정
• 입력값 텍스트 상자 폼 만들어서 value의 값에 위에서 정의해준 상태의 value를 가져와 onChange 자바 핸들러를 이용함.

3. onSubmit,onChange 클래스의 매소드로 만들기

• e.preventDefault 이벤트를 정의하지 못하게 한 다음
• 입력한 값를 숫자로 변환하는 parseInt를 사용하여 정답값이랑 같은지 if문을 이용하여 확인
• 정답이라면 result값에 정답이라고 알려주고 first값과 second값을 바꿔주고 value값을 지우며, 오답이라면 result값에 틀렸다고 알려주고 value값만 지운다.
• form의 텍스트를 변화할 수 있도록 클래스의 매소드를 만들어주고
  this.setState({value: e.target.value}); 이처럼 value값으로 변화시켜줌

추가:)

숙제: result: this.state.first * this.state.second + ' 정답'

setState

setState안에 this.state가 들어가면 함수로(return) 정의하면 됨.

ref

• input에다가 자동으로 focus를 주고 싶다면
  <input ref={(c) => {this.input = c; }}...
  해주고 this.input.focus();

추가기능 (count)

• count 상태를 추가

this.state= {
  first: Math.ceil(Math.random() * 9),
  second: Math.ceil(Math.random() * 9),
  value: '',
  result: '',
  count: 0,
};

• prevState를 활용하여 몇 번만에 정답을 입력했는지 정답에서 나타남.

onSubmit=(e) => {
  e.preventDefault();
  if (parseInt(this.state.value) === 
      this.state.first * this.state.second)
  {
    this.setState((prevState) => {
      return{
        result:(prevState.count + 1) +'번 만에 정답 : '+ prevState.first * prevState.second,
        first: Math.ceil(Math.random() * 9),
        second: Math.ceil(Math.random() * 9),
        value: '',
      };
    });
    this.input.focus();
    
  } else {
    this.setState((prevState) => {
      return{
        result:'땡',
        value: '',
        count: prevState.count + 1,
      };  
    });
    this.input.focus();
  }
};