Tutorial 자습서 - 4
페이지 정보
본문
Reactjs.org 자습서 Tutorial 활용 - 순서대로
https://ko.reactjs.org/tutorial/tutorial.html
- 틱택토 Tic Tac Toe 게임 만들기로 자습하기 -
-----------------------
자습서 - 4
-----------------------
사각형을 클릭하면 X가 출력되도록...
1. 버튼 태그 수정
class Square extends React.Component {
render() {
return (
<button className="square">
{this.props.value}
</button>
);
}
}
에서
<button className="square">
을
<button className="square" onClick={function() { console.log('click'); }}>
으로 수정
2.
state 설정
Square 클래스에 생성자를 추가하여 state를 초기화.
즉
class Square extends React.Component {
render() {
return (
<button className="square" onClick={() => { console.log('click') }}>
{this.props.value}
</button>
);
}
}
를
class Square extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null,
};
}
.... }
로 변경. >> super(props) 생성하고 this.state 에 초기값 null 할당.
그리고
<button className="square" onClick={() => console.log('click')}>
{this.props.value}
</button>
이 부분을
<button
className="square"
onClick={() => this.setState({value:'X'})}
>
{this.state.value}
</button>
로 변경. >> setState 함수 실행 value 에 X 할당.
서버 재실행 결과 : 왼쪽의 초기 상태에서 사각형을 클릭하면 X가 입력됨.
