분류 Reactjs

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

컨텐츠 정보

  • 조회 426 (작성일 )

본문

이미 몇 년 동안 React와 함께 일한 결과 웹 사이트 및 모바일 애플리케이션 개발을 위해 프레임워크만 사용했음을 깨달았습니다. 후크 (Hooks)를 추가하면 작은 게임을 만들고 React 라이프 사이클의 작동 방식을 조금 더 이해하는 것이 흥미로울 것이라고 생각했습니다. 게임 선택을 위해, 나는 몇 년 전에 구축 한 Tic Tac Toe의 jQuery 버전을 React로 변환하기로 결정했습니다. 게임의 최종 버전은 여기에서 찾을 수 있으며 코드는 Github에서 직접 사용할 수 있습니다.


https://claritydev.net/blog/making-tic-ta-toe-with-react-hooks-and-styled-comp 


설정 


게임 설정을 위해 create-react-app을 사용합니다. React 외에도 Styled 구성 요소, CSS 프레임 워크인 papercss를 사용하여 게임에 멋진 미니멀리즘 스타일을 지정하고 (내 웹 사이트에서는 papercss도 사용), "React-modal"을 사용하여 게임 결과를 표시합니다. 빈 프로젝트를 만들고 필요한 의존성을 설치하는 것으로 시작하겠습니다.


npx create-react-app tic_tac_toe cd tic_tac_toe npm i styled-components papercss react-modal 


프로젝트를 설정 한 후에는 주 게임 구성 요소와 papercss 스타일을 포함하도록 App.js를 수정하여 시작할 수 있습니다.


// App.js import React from "react"; import styled from "styled-components"; import TicTacToe from "./TicTacToe"; import "papercss/dist/paper.min.css"; function App() { return ( <Main> <TicTacToe /> </Main> ); } const Main = styled.main` display: flex; justify-content: center; align-items: center; height: 100vh; `; export default App; 


화면의 게임 구성 요소가 중앙에 나타납니다. 바닥 글과 같은 관련 없는 요소는 생략되므로 가장 중요한 부분에 집중할 수 있습니다. 다음 단계는 실제 틱택 토 (TicTacToe) 구성 요소를 만드는 것입니다. 앱의 크기가 비교적 작기 때문에 모든 파일을 "src"폴더에 직접 보관합니다.


먼저 게임의 상수 중 일부를 별도의 constants.js에 추가하는 것으로 시작하겠습니다.


// Dimensions of the board (3x3 squares), game outcomes and players, // and dimensions for the board squares, in pixels. export const DIMS = 3; export const DRAW = 0; export const PLAYER_X = 1; export const PLAYER_O = 2; export const SQUARE_DIMS = 100; 


이제 새로 생성 된 'TicTacToe.js'에서 게임 그리드 설정 및 렌더링을 시작할 수 있습니다.