[React 연습 2일차] 리액트 TicTacToe Game 구현

 

 

어제부터 시작한 React 구구단 구현 연습 ! 아래에 html, css 기본 세팅이 있다. 오늘은 어제 만든 것 외우고 진도를 쪼금만 나가봐야겟다. 

 

https://blckchainetc.tistory.com/241

[React 연습 1일차] 리액트 TicTacToe Game 구현

 

 

어제까지 한 내용

class Square extends React.Component{
    render(){
        return(
            <button className="square">
                {this.props.value} // Board Component에서 받은 value 변수를 버튼안에 넣기
            </button>
        )
    }
}


class Board extends React.Component{
    
    renderSquare(i){
        return <Square value={i}/>   /// -> 인자값을 Square Component로 value라는 변수에 담아 보냄 
    }
    render(){
        const status='Next Player:X'
        
        return(
            <div>
                <div className="status">{status}</div>
                <div className="board-row">
                    {this.renderSquare(0)}   //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>{/* tood */}</ol>
                </div>
            </div>
        )
    }
}


ReactDOM.render(
    <Game />,
    document.getElementById('root')
)

오늘 수업에서 state 끌어 올리기 / render 함수 를 배우고나니 어제 이해 안간 부분들이 이해되었다. 

그리고 큰 그림 (?) 이 그려졌다 ! 어제 코드를 쓰면서 이게 무슨 말이고 계속 의아하면서 쳤는데 오늘은 왜 이게 필요한지 조금씩 이해됐다. 

 

game 이라는 배경에 game-board, game-info 를 구분해서 나누고 game-board는 class Board를 끌어왔고 Board는 class Square 에 값을 button에 담아 받아서 table 형태로 return 한다. 

 

위의 코드 외우기 완료 !  진도는 내일 나가야겠다,,,,,