React
웹 게임을 만들며 배우는 React(1)
리액트는 불필요한 컨텐츠의 리로드가 없다. 예를 들어 리액트를 사용하지 않은 페이지는 컴포넌트 하나를 클릭하면 전체화면이 다시 로딩된다. 리액트는 필요한 스테이트의 정보만 리로드하기 때문에 결과적으로 동적인 웹페이지를 효율적으로 유지 보수하고 관리할 수 있다. [참고]React를 사용하는 이유
Component
- UI를 구성하는 개별적인 뷰 단위
- 컴포넌트의 강점: 개별적으로 관리가 가능하기 때문에 생산성과 유지 보수가 용이하다.
- 일반적으로 컴포넌트의 구문은 대문자로 시작하고, HTML 태그 문법은 소문자로 시작한다.
JSX
- javascript + XML XML 문법
- JSX는 javascript 문법의 createElement로 생각하면 된다.
- JSX 문법을 지원하기 위해서 babel을 사용한다.
- ES6 문법 지원 ES6 문법 정리
- HTML과 JSX 문법을 섞지 않고 매서드를 함수로 따로 빼주는 게 좋다.
Tips
- 실무에서는 constructor를 사용하지 않고 바로 state 구문을 넣어주는 경우가 많다.
- 매서드에서
=>대신function구문을 사용하면this가 적용되지 않는다.
리액트는 프레임워크인가 라이브러리인가? (공식 사이트에서는 'javascript 라이브러리'라고 명확화가 되어있긴 하다.)
<head>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>헤드 부분에서 React와 Babel을 사용하기 위한 CDN. Babel은 버전이 두가지인 듯 한데, 위 버전의 CDN은 JSX 문법 사용 시에 동작하지 않는 경우도 있어서 다른 버전을 사용해야 한다. 예를 들어, 단순히 감싸주기 위한 <div> 태그를 <>로 바꾸기 위해서는 Babel2가 필요하다. 이번 예제에서는 따로 Babel2는 사용하지 않고, React.Fragment를 이용했다.
<script type="text/babel"></script>
<script type="text/babel">
ReactDOM.render(<GuGuDan />, document.querySelector('#root'));
</script>Babel을 사용하기 위해서는 JSX 구문을 감싼 <script> 태그 요소에 type="text/babel"을 추가해야한다. ReactDOM 사용 시에도 마찬가지이다.
class GuGuDan extends React.Component {
constructor(props) {
super(props);
this.state = {
first: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
result: ''
};
}
onSubmit = (e) => {
e.preventDefault();
if (parseInt(this.state.value) === this.state.first * this.state.second) {
this.setState((prevState) => {
return {
result: '정답: ' + prevState.value,
first: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
};
});
this.input.focus();
} else {
this.setState({
result: '땡',
value: '',
});
this.input.focus();
}
};
onChange = (e) => {
this.setState({ value: e.target.value });
};
input;
onRefInput = (c) => { this.input = c; };
render() {
return (
<React.Fragment>
<div>{this.state.first} 곱하기 {this.state.second}는?</div>
<form onSubmit={this.onSubmit}>
<input ref={this.onRefInput} type="number" value={this.state.value} onChange={this.onChange} />
<button>입력!</button>
</form>
<div>{this.state.result}</div>
</React.Fragment>
);
}
}
🏫Chung-Ang Univ. 👩💻Computer Science