본문 바로가기
틱택토6. 승자 결정하기 목차 승자를 반환하는 함수 선언 클릭시 동작하는 이벤트 함수 내에 승자 반환함수 호출 div에 status 렌더 1. 승자를 반환하는 함수 선언 먼저 함수의 내부에 이기는 경우를 배열로 작성해보자. 이중배열을 통해 이중배열의 엘리먼트는 squares의 인덱스 번호가 될 것이다. const calculateWinner = (squares) => { const line = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ]; }; 다음으로는 이기는 경우에 대한 반복을 돌리면서 각각의 경우의 엘리먼트(즉, 매개변수로 들어올 squares의 인덱스가 될 부분)을 각각 변수에 담아보자. 그 다음엔 매개변.. 2022. 4. 23.
틱택토5. 컴포넌트 작성(3) 지난 게시글에서는 board 컴포넌트에 상태를 선언하고, setState로 상태 변경을 감지한 후, Square컴포넌트로 onClick 이벤트를 작동시킬 함수를 props로 전달하였다. 이번 게시글에서는, state값 props로 전달해서 버튼 클릭 시 'X' 또는 'O' 렌더링 한번 클릭한 버튼을 재클릭할 수 없도록 하기 를 해볼 것이다. 1. state값 props로 전달해서 버튼 클릭 시 'X' 또는 'O' 렌더링 버튼엘리먼트의 내부의 value props로 전달할 수 있도록하는 코드 부터 시작해보자. 지난 게시글에서 squares 변수를 선언하여 handleClick 안에서 작성해두었기 때문에 간단히, renderSquare 함수 안의 Square 컴포넌트로 보낼 props인 value의 값을 아.. 2022. 4. 23.
틱택토4. 컴포넌트 작성(2) 지난번 게시글에서 아래 부분까지 완료하였다. 3개의 컴포넌트 생성 매개변수 i를 받는 renderSquare 함수 생성 매개변수 i를 Board 컴포넌트에서 Square 컴포넌트로 props 전달 리액트 dev 확장파일을 통해 props 잘 전달된 점 확인 오늘은 나머지 부분을 시작해보자. 우선은 버튼을 클릭했을 때 'X' 또는 'O'로 플레이어가 나타날 수 있게 하자! 이를 위해 board 컴포넌트 안에 state를 선언 board 컴포넌트 안에 handleClick이라는 함수를 선언해서 props로 Square 컴포넌트에 전달 Square 컴포넌트에서 온클릭 이벤트 작성 후 이벤트 동작 여부 확인 handleClick 함수의 내용 작성 를 할 것이다. 우선, board 컴포넌트 안에 상태(state).. 2022. 4. 22.
틱태토3. 컴포넌트 작성(1) 목표: 3*3 보드판 렌더 및 props 전달을 통해 각각의 버튼에 인덱스 값 나타내기 각각의 버튼을 식별할 수 있는 index를 Board 컴포넌트에서 Square 컴포넌트로 전달하기 브라우저를 통해 렌더 및 props 전달 여부 확인 이전에 생성하였던 컴포넌트 안에 내용을 작성해보자 https://yellow-w.tistory.com/222 2. TicTacToe 게임의 명세 이 게임은 3*3형식의 바둑판에서 먼저 빙고를 완성하는 사람이 이기는 게임이다. Game/Board/Square라는 3개의 컴포넌트 존재 Game 컴포넌트는 하위에 Board 컴포넌트를 가진 게임 Set Board 컴포넌트는 크 yellow-w.tistory.com 이전 글에서 보았던 명세대로, Game 컴포넌트에서 Board .. 2022. 4. 21.
틱택토2. TicTacToe 게임의 명세 이 게임은 3*3형식의 바둑판에서 먼저 빙고를 완성하는 사람이 이기는 게임이다. Game/Board/Square라는 3개의 컴포넌트 존재 Game 컴포넌트는 하위에 Board 컴포넌트를 가진 게임 Set Board 컴포넌트는 크게 두 가지 영역으로 나뉨 승자 또는 다음 선수를 나타내는 영역 Square 컴포넌트의 각각의 버튼을 포함하는 board-row 영역*3 Square 컴포넌트는 클릭 시, 버튼의 내부에 클릭한 플레이어를 표시하는 버튼 엘리먼트를 가짐 게임의 규칙 플레이어 중 승자가 생기면 게임은 종료된다. 이미 한번 클릭된 버튼은 재클릭할 수 없으며, 플레이는 되돌릴 수 없다. 2022. 4. 21.
틱택토1. 레이아웃 및 CSS 셋팅 리액트 공식 홈페이지의 자습서 부분에 있는 'TicTacToe 게임'을 완성해보자! 우선, 이번 게시글에서는 기본 레이아웃 및 css를 셋팅해보자! 두 파일을 동일한 디렉토리에 생성하면 된다! 1. game.html 헤드 부분에 react/reactDOM/babel CDN과 css link 작성 완료 바디 부분에 root라는 id를 가진 div 생성하여 ReactDOM의 렌더 메서드에 작성 Game/Board/Square라는 3개의 컴포넌트 생성 2. game.css body { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; } ol, ul { padding-left: 30px; } .board-row:after { clear: both;.. 2022. 4. 21.

티스토리툴바