Tutorial - TicTacToe
/*
React 소개 :
React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리
작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도움
*/
class Square extends React.Component {
//React 컴포넌트는 생성자에 this.state를 설정하는 것으로 state를 가질 수 있다
constructor(props){
super(props);
//Square의 현재 값을 this.state에 저장하고 Square를 클릭하는 경우 변경
this.state = {
value : null,
};
}
render() {
{/*Square 컴포넌트를 클릭하면 “X”가 체크되는 기능 추가. 화살표 함수 사용
//render 함수 내부에서 onClick 핸들러를 통해 this.setState를 호출하여 <button> 클릭시 Sqaure가 다시 렌더링해야 한다고 알림.
//컴포넌트에서 setState를 호출하면 React는 자동으로 컴포넌트 내부의 자식 컴포넌트 역시 업데이트
Board renderSquare 함수로 state설정 변경 후 state에서 props로 바꿈
*/}
return (
<button
className="square"
onClick={() => this.props.onClick()}
>
{/*
onClick시 프로세스 :
1 내장된 DOM <button> 컴포넌트에 있는 onClick prop은 React에게 클릭 이벤트 리스너를 설정하라고 알려줌.
2 버튼을 클릭하면 React는 Square의 render() 함수에 정의된 onClick 이벤트 핸들러를 호출.
3 이벤트 핸들러는 this.props.onClick()를 호출. Square의 onClick prop은 Board에서 정의됨.
4 Board에서 Square로 onClick={() => this.handleClick(i)}를 전달했기 때문에 Square를 클릭하면 this.handleClick(i)를 호출.
5아직 handleClick()를 정의하지 않았기 때문에 코드가 깨짐. 지금은 사각형을 클릭하면 “this.handleClick is not a function”과 같은 내용을 표시하는 붉은 에러.
*/}
{/* TODO- Prop 표시 */}
{this.props.value}
</button>
);
}
}
class Board extends React.Component {
constructor(props){
super(props);
this.state = {
//두 개의 자식 컴포넌트들이 서로 통신하게 하려면 부모 컴포넌트에 공유 state를 정의해야함.
//부모 컴포넌트는 props를 사용하여 자식 컴포넌트에 state를 다시 전달
//부모-자식 동기화를 이룸
squares : Array(9).fill(null),
};
}
handleClick(i){
const squares = this.state.squares.slice();
squares[i] = 'X';
this.setState({squares: squares});
}
renderSquare(i) {
//Square 클래스에 value prop을 전달
//return <Square value={i} />;
//Square 클래스에 Board 클래스의 value prop을 전달
//Board에서 Square로 함수를 전달하고 Square는 사각형을 클릭할 때 함수를 호출
return <Square
value={this.state.squares[i]}
onClick={ () => this.handleClick(i)}
/>;
}
render() {
const status = 'Next player: X';
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
class Game extends React.Component {
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
// ========================================
//render 함수를 통해 표시할 뷰 계층 구조(화면에서 보려는 내용)를 반환
ReactDOM.render(
<Game />,
document.getElementById('root')
);
/*
JSX 문법을 쓰면 아래와 같이 변환됨.
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
JSX 문법이 없으면 React.createElement('div') 로 호출해야함.
return React.createElement('div', {className: 'shopping-list'},
React.createElement('h1', / ... h1 children ... /),
React.createElement('ul', \/ ... ul children ... /)
);
*/
Reference
この問題について(Tutorial - TicTacToe), 我々は、より多くの情報をここで見つけました https://velog.io/@csk917work/React-Demoテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol