분류 Reactjs

React 후크 및 스타일 구성 요소를 사용하여 자신 만의 탁월한 Tic Tac Toe을 만드십시오 (2)

컨텐츠 정보

  • 조회 325 (작성일 )

본문

import React, { useState } from "react"; import styled from "styled-components"; import { DIMS, PLAYER_X, PLAYER_O, SQUARE_DIMS } from "./constants"; const arr = new Array(DIMS ** 2).fill(null); const TicTacToe = () => { const [grid, setGrid] = useState(arr); const [players, setPlayers] = useState({ human: PLAYER_X, computer: PLAYER_O }); const move = (index, player) => { setGrid(grid => { const gridCopy = grid.concat(); gridCopy[index] = player; return gridCopy; }); }; const humanMove = index => { if (!grid[index]) { move(index, players.human); } }; return ( <Container dims={DIMS}> {grid.map((value, index) => { const isActive = value !== null; return ( <Square key={index} onClick={() => humanMove(index)} > {isActive && <Marker>{value === PLAYER_X ? "X" : "O"}</Marker>} </Square> ); })} </Container> ); }; const Container = styled.div` display: flex; justify-content: center; width: ${({ dims }) => `${dims * (SQUARE_DIMS + 5)}px`}; flex-flow: wrap; position: relative; `; const Square = styled.div` display: flex; justify-content: center; align-items: center; width: ${SQUARE_DIMS}px; height: ${SQUARE_DIMS}px; border: 1px solid black; &:hover { cursor: pointer; } `; const Marker = styled.p` font-size: 68px; `; export default TicTacToe; 


먼저 필요한 모든 의존성을 가져오고 그리드의 기본 배열을 선언합니다. ES2016에 추가 된 JavaScript의 새로운 지수 연산자와 ES2015 / ES6의 Array.prototype.fill()을 사용하여 길이 9의 배열을 만들고 null 값으로 채 웁니다. 구성 요소 외부에서 선언되므로 구성 요소가 다시 렌더링 될 때 다시 작성되지 않습니다. 다차원 배열을 만든 다음 재귀 적으로 렌더링 하는 대신 1 차원 배열을 렌더링하고 CSS를 사용하여 너비를 제한합니다.


width : ${({dims}) =>`${dims * (SQUARE_DIMS + 5)}px`}; 변수를 컴포넌트에 전달하는 스타일이 지정된 컴포넌트 방식이며, 너비로도 쓸 수 있습니다. ${(props) =>`${props.dims * (SQUARE_DIMS + 5)}px`}; 여기서 우리는 컨테이너의 너비를 100 픽셀의 3 제곱으로 제한하고 (경계를 설명하기 위해 몇 픽셀) flex-flow : wrap을 설정하여 여분의 제곱을 다음 줄로 밀어 넣습니다. x 3 사각형 격자. npm start를 실행하고 몇 번 움직이면 그리드가 제대로 작동하는지 확인할 수 있습니다.


0ELMJi1.png 


좋아 보이지만 컴퓨터 동작을 설정하지 않았기 때문에 너무 흥미 진진하지 않습니다. computerMove 기능을 추가하여 수정하겠습니다.