공부자료 : 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();
}
};