[220414] 빙고게임 완성하기 - 01

1-9까지 채워진 숫자판 만들기

<script type="text/babel">
    // Square
    // Board
    // Game

    class Square extends React.Component{
        render(){
            //{this.props.value} 부모에게서부터 던져준 데이터를 보여주겠다!!!!
            return(
                <button className="square">
                    {this.props.value}
                </button>
            )
        }
    }

    class Board extends React.Component{
        renderSquare = (i) => {
            return <Square value={i} />
        }
        render(){
            const {renderSquare} = this
            return(
                <div>
                    <div className="status"></div>

                    <div className="board-row">
                        {renderSquare(1)}
                        {renderSquare(2)}
                        {renderSquare(3)}
                    </div>
                    <div className="board-row">
                        {renderSquare(4)}
                        {renderSquare(5)}
                        {renderSquare(6)}
                    </div>
                    <div className="board-row">
                        {renderSquare(7)}
                        {renderSquare(8)}
                        {renderSquare(9)}
                    </div>

                </div>
            )
        }
    }

    class Game extends React.Component{
        render(){
            return(
                <div className="game">
                    <div className="game-board">
                        <Board />
                    </div>
                </div>
            )
        }
    }

    ReactDOM.render(
        <Game />
        ,document.querySelector('#root')
    )
</script>

 

 

 

 

 

클릭하면 X가 표시되는 숫자판

<div id="root"></div>
<script type="text/babel">
    // Square
    // Board
    // Game

    class Square extends React.Component{
        state = {
            value:null,
        }

        render(){
            //{this.props.value} 부모에게서부터 던져준 데이터를 보여주겠다!!!!
            return(
                <button className="square"
                        onClick={ ()=>{ this.setState({value:'X'}) } }
                >
                    {this.state.value}
                </button>
            )
        }
    }

    class Board extends React.Component{

        renderSquare = (i) => {
            return <Square />
        }

        render(){
            const {renderSquare} = this
            return(
                <div>
                    <div className="status"></div>

                    <div className="board-row">
                        {renderSquare(1)}
                        {renderSquare(2)}
                        {renderSquare(3)}
                    </div>
                    <div className="board-row">
                        {renderSquare(4)}
                        {renderSquare(5)}
                        {renderSquare(6)}
                    </div>
                    <div className="board-row">
                        {renderSquare(7)}
                        {renderSquare(8)}
                        {renderSquare(9)}
                    </div>

                </div>
            )
        }
    }

    class Game extends React.Component{
        render(){
            return(
                <div className="game">
                    <div className="game-board">
                        <Board />
                    </div>
                </div>
            )
        }
    }

    ReactDOM.render(
        <Game />
        ,document.querySelector('#root')
    )
</script>

 

 

 

 

변형본 (Square, Board 컴포넌트만)

class Square extends React.Component{
    render(){
        //{this.props.value} 부모에게서부터 던져준 데이터를 보여주겠다!!!!
        return(
            <button className="square"
                    onClick={ ()=>{ this.props.onClick() } }
            >
                {this.props.value}
            </button>
        )
    }
}

class Board extends React.Component{
    state = {
        // square:[null,null,null,null,null,null,null,null,null]
        squares : Array(9).fill(null)
    }

    handleClick = (i) => {
        const squares = [...this.state.squares]
        squares[i] = 'X'
        this.setState({ squares })
    }

    renderSquare = (i) => {
        return <Square 
                    onClick={ () => { this.handleClick(i) } }
                    value = {this.state.squares[i]}
                />
    }

    render(){
        const {renderSquare} = this
        return(
            <div>
                <div className="status"></div>

                <div className="board-row">
                    {renderSquare(0)}
                    {renderSquare(1)}
                    {renderSquare(2)}
                </div>
                <div className="board-row">
                    {renderSquare(3)}
                    {renderSquare(4)}
                    {renderSquare(5)}
                </div>
                <div className="board-row">
                    {renderSquare(6)}
                    {renderSquare(7)}
                    {renderSquare(8)}
                </div>

            </div>
        )
    }
}

 

 

 

 

 

초기값은 null, 클릭 할때마다 X -> O -> X - > O ... 로 바뀌게 만들기

class Square extends React.Component{
    render(){
        //{this.props.value} 부모에게서부터 던져준 데이터를 보여주겠다!!!!
        return(
            <button className="square"
                    onClick={ ()=>{ this.props.onClick() } }
            >
                {this.props.value}
            </button>
        )
    }
}

class Board extends React.Component{
    state = {
        // square:[null,null,null,null,null,null,null,null,null]
        squares : Array(9).fill(null),
        xIsNext:true,
    }

    handleClick = (i) => {
        const squares = [...this.state.squares]
        squares[i] = this.state.xIsNext ? 'X' : 'O'
        this.setState({
            squares,
            xIsNext:!this.state.xIsNext
        })
    }

    renderSquare = (i) => {
        return <Square 
                    onClick={ () => { this.handleClick(i) } }
                    value = {this.state.squares[i]}
                />
    }

    render(){
        const {renderSquare} = this
        return(
            <div>
                <div className="status"></div>

                <div className="board-row">
                    {renderSquare(0)}
                    {renderSquare(1)}
                    {renderSquare(2)}
                </div>
                <div className="board-row">
                    {renderSquare(3)}
                    {renderSquare(4)}
                    {renderSquare(5)}
                </div>
                <div className="board-row">
                    {renderSquare(6)}
                    {renderSquare(7)}
                    {renderSquare(8)}
                </div>

            </div>
        )
    }
}