ํฌ๋๋ฆฌ์คํธ๋ฅผ ์์ ํ๊ธฐ์ ์์ ๋ฆฌ์กํธ๋ฅผ ๋๋ฌด ๋ชจ๋ฅด๋๊ฑฐ ๊ฐ์, ๊ณต์๋ฌธ์ ์์ต์์ ํฑํํ ๋ฅผ ๊ณต๋ถํ๊ณ ์๋ค.
function Square(props) {
return (
<button
className="square"
onClick ={props.onClick}
>
{props.value}
</button>
);
}
class Board extends React.Component {
constructor(props){
super(props);
this.state = {
squares: Array(9).fill(null),
xIsNext : true,
};
}
handleClick(i) {
const squares = this.state.squares.slice();
if(calculateWinner(squares) || squares[i]){
return;
}
squares[i] = this.state.xIsNext ? 'X' : 'O';
this.setState({
squares: squares,
xIsNext : !this.state.xIsNext,
});
}
renderSquare(i) {
return (
<Square
value ={this.state.squares[i]}
onClick ={ () => this.handleClick(i)}
/>
);
}
render() {
const winner = calculateWinner(this.state.squares);
let status;
if (winner) {
status = 'Winner : '+ winner;
} else {
status = 'Next player : ' + (this.state.xIsNext ? 'X' : 'O');
}
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>
);
}
}
function calculateWinner(squares) {
const lines = [
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6],
];
for (let i = 0; i < lines.length; i++) {
const [a,b,c] = lines[i];
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]){
return squares[a];
}
}
return null;
}
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
props์ state๊ฐ ํท๊ฐ๋ ค์ ๊ณต๋ถ์ค์ธ๋ฐ,
๋ณ์๋ช ์ผ๋ก ์ ํ์์ผ๋ฉด ์ข์ํ ๋ฐ props์ state๋ก ์ ํ์์ด ๋ํท๊ฐ๋ฆฐ๋ค.
handleClick(i)ํจ์ ๋ถ๋ถ์ ๋ก์ง์ด ์์ดํด๊ฐ ๊ฐ์ง์์์ ๋ณด๊ณ ๋ ๋ณด๊ณ ๊ณ์ ๋๋ ค๋ณด๊ณ ์๋ค.
๋ชจ๋ฅด๋ ๋ถ๋ถ์ ์ฌ๊ธฐ์ state์ props์ ๊ฐ์ด ๋ฌด์์ธ๊ฐ ์ด๋ค.
๋๊ฐ์ง๊ฐ ํ์คํ์ง์์์ ๋๋ฃจ๋ญ์คํ๋ค.
๋๊ฐ์ง๋ฅผ ์ ๋ฆฌํ๊ณ ๊ฐ์ผํ ๊ฒ ๊ฐ๋ค.
Props VS State
๊ณตํต์ :
๊ฐ๋จํ๊ฒ๋ ๋๋ค ํ์ฌํ๋ฉด์ ๋ณด์ด๋ ๊ฐ์ ๋งํ๋ค.
๋ํ ์ผ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด๋ก ๋๊ฐ์ฒด ๋ชจ๋ ๋ ๋๋ฆฐ ๊ฒฐ๊ณผ๋ฌผ์ ์ํฅ์ ์ค๋ค.
๋ถ๋ชจ๋ก๋ถํฐ ๋ฐ์ props ๋ฐ state ์ด๊ธฐ๊ฐ์ ๋ชจ๋ Component ๋ด๋ถ์ ์ ์๋ ๊ธฐ๋ณธ๊ฐ์ ์ฌ์ ์ํ๋ค.
์ฐจ์ด์ :
props = ํจ์์ ๋งค๊ฐ๋ณ์์ฒ๋ผ ์ปดํฌ๋ํธ์ ์ ๋ฌ๋๋ฉฐ, ์ปดํฌ๋ํธ์ render()ํจ์์ ๋ํ ์ ๋ ฅ ๋ฐ์ดํฐ์ด๋ค.
(๋ฐ์ดํฐ๊ฐ ์ด๋์ ์๋์ง ํ์ธํด์ผ ํ๋ค.)
state = ํจ์๋ด์ ์ ์ธ๋ ๋ณ์์ฒ๋ผ ์ปดํฌ๋ํธ์์์ ๊ด๋ฆฌ๋๋ค.
์ ๋ฆฌ๋ฅผ ํ๋ฉด ์๊ฒ ๋๋ฐ ๋ง์ ์ฝ๋์์ ๋ง๋ฅ๋จ๋ฆฌ๋ฉด ํท๊ฐ๋ฆฐ๋ค.
๊ณ์ ๋ณด๋ฉด์ ์ต์ํด ์ ธ์ผํ ๊ฒ ๊ฐ๋ค.
'TIL -์ผ๊ฐํ์ต๊ธฐ๋ก > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Stateairline-client ๊ณผ์ (0) | 2022.02.09 |
---|---|
Weather API & data component (0) | 2022.02.05 |
[TodoList]create react app ์ค์น (0) | 2022.01.30 |
๋ฆฌ์กํธ๋ก Todo list๋ฅผ ๋ง๋ค์ด๋ณด์ (0) | 2022.01.30 |
REACT - 21.12.26 - JSX, STATE, PROPS (0) | 2021.12.26 |
๋๊ธ