컴포넌트를 만들때는 React.Component 클래스를 상속하여 만듭니다.
class Square extends React.Component {
render() {
return (
<button className="square">
</button>
);
}
}
class Board extends React.Component {
render() {
const status = 'Next player: X';
return (
<div>
</div>
);
}
}
class Game extends React.Component {
render() {
return (
<div className="game">
</div>
);
}
}
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
함수형 컴포넌트
React는 render 메서드만으로 구성된 Square와 같은 컴포넌트 타입을 위해 함수형 컴포넌트라 불리는 간단한 문법을 지원합니다. React.Component를 확장한 클래스를 정의하는 것보다 간단하게 props를 가져오고 랜더링 해야할 것을 반환하는 함수를 작성하는 것이 좋다.
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}