React .02 : Tutorial : Tic - Tac -Toe(1)

hwandu 2024. 3. 8. 17:34

2024. 3. 8. 17:34

본 글은 React 공식문서를 정리 한 글입니다.
더 자세한 내용은 https://react.dev/을 참고하시길 바랍니다.

튜토리얼을 통해 간단한 Tic-Tac-Toe 게임을 구현합니다. 기존의 React 지식을 요구하지 않으며 구현을 통해 React 구축에 기본이 되는 개념들을 이해할 수 있습니다. 튜토리얼은 4가지 섹션으로 나누어져 있습니다.

튜토리얼 설정은 튜토리얼을 따라가기 위한 시작점을 제공합니다.
구현하기에서는 React의 기본요소인 컴포넌트, props, state에 대해 공부합니다.
게임 완성에서는 React 개발에 대해 가장 기본적인 기술을 공부합니다.
시간여행 추가에서는 React의 고유한 강점에 대해 더욱 깊게 알아봅니다.

1. 튜토리얼 설정

시작하기에 앞서 세 가지 주요 섹션이 있습니다.

App.js, index.js, style.css 그리고 public 폴더
선택한 파일의 소스 코드를 볼 수 있는 코드 편집기
작성한 코드가 어떻게 표시되는지 확인할 수 있는 브라우저

1.1 App.js

export default function Square() {
	return <button className="Square">X</button>;
}

App.js의 코드는 컴포넌트를 생성합니다. React에서 컴포넌트는 사용자 인터페이스의 일부를 나타내는 재사용 가능한 코드조각입니다. 컴포넌트는 애플리케이셔의 UI 요소를 렌더링, 관리 및 업데이트하는 데 사용됩니다. 첫 번째 줄은 Square라는 함수를 정의합니다. JavaScript의 export 키워드를 사용하면 이 파일 외부에서 함수를 사용할수 있습니다. default 키워드는 이파일의 메인기능이라는 것을 다른 파일에 알려주는 역할을 합니다. 두 번째 줄은 버튼을 반환합니다. JavaScript return 키워드는 뒤에 오는 모든 함목이 함수 호출자에게 값으로 반환됨을 의미합니다. 그다음은 JSX 요소<button> 입니다. JSX 요소는 표시하려는 내용을 설명하는 JavaScript 코드와 HTML 태그의 조합입니다. className="square"는 CSS에 버튼 스타일 지정을 알려주는 버튼의 속성 또는 prop 입니다. X는 버튼 내부에 표시되는 텍스트이며 </button>는 JSX 요소를 닫아 다음 콘텐츠가 버튼 내부에 배치되어서는 안 됨을 나타냅니다.

1.2 styles.css

이 파일은 React 앱의 스타일을 정의합니다. 처음 두개의 CSS 선택자 (* 와 body)는 앱의 큰 부분의 스타일을 정의하는 반면 .square 선탁자는 className이 square로 설정된 모든 구성요소의 스타일을 정의합니다. 이것은 App.js 파일에서 Square 컴포넌트의 버튼과 일치할 것입니다.

1.3 index.js

튜토리얼 중에는 이 파일을 편집하지 않을 것이지만 이는 App.js 파일에서 생성한 컴포넌트와 웹 브라우저 사이의 다리 역할을 합니다.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';

import App from './App';

일반적인 React 애플리케이션 파일의 1~5번째 줄은 모든 필수 구성요소와 종속성을 함께 가져옵니다 :

React : React 라이브러리를 가져옵니다. 이는 React 애플리케이션을 구축하는 데 필수적입니다.
React DOM : React DOM은 DOM(Document Object Model)과 상호 작용하기 위한 특정 메서드를 제공하는 별도의 패키지입니다. 이는 React 컴포넌트를 브라우저에 렌더링하는 데 사용됩니다.
style : 애플리케이션의 컴포넌트에 필요한 CSS 또는 스타일 종속성을 포함합니다. 이는 컴포넌트가 디자인 사양에 따라 스타일이 지정될 수 있도록 합니다.
App 컴포넌트 : 주로 App으로 명명된 애플리케이션의 주요 컴포넌트를 가져옵니다. 이 컴포넌트는 애플리케이션의 컴포넌트 계층 구조의 루트 역할을 합니다.

파일의 나머지 부분은 일반적으로 이러한 구성 요소를 모두 함께 결합하고 최종 결과물을 public 폴더의 index.html에 삽입합니다. React 애플리케이션은 일반적으로 root React 컴포넌트가 마운트되는 진입점 HTML 파일(일반적으로 index.html)을 가지고 있습니다.

2. 구현하기

2.1 보드 만들기

현재 보드는 단 하나의 정사각형이지만 9개가 필요합니다. 정사각형을 복하여 붙여넣으면 다음과 같은 두 개의 정사각형을 만들 수 있습니다. 그러나 React 구성 요소는 두 개의 버튼과 같은 여러 개의 인접한 JSX 요소가 아닌 단일 JSX 요소를 반환해야 합니다. 이 문제를 해결하려면 조각 ( <>및 </>)을 사용하여 다음과 같이 여러 개의 인접한 JSX 요소를 래핑할 수 있습니다.

export default function Square() {
  return (
    <>
      <button className="square">X</button>
      <button className="square">X</button>
    </>
  );
}

9개의 사각형을 붙여넣은 후 각 행마다 div로 그룹화 시켜줍니다. 이후 CSS 클래스를 추가하고 어디에 있는지를 나타내기 위해 숫자를 적어줍니다. 이제는 Square가 아닌 Board가 되었으니 이름을 변경시켜줍니다!

export default function Board() {
  return (
    <>
      <div className="board-row">
        <button className="square">1</button>
        <button className="square">2</button>
        <button className="square">3</button>
      </div>
      <div className="board-row">
        <button className="square">4</button>
        <button className="square">5</button>
        <button className="square">6</button>
      </div>
      <div className="board-row">
        <button className="square">7</button>
        <button className="square">8</button>
        <button className="square">9</button>
      </div>
    </>
  );
}

2.2 props를 통한 데이터 전달

다음으로, 사용자가 해당 사각형을 클릭할 때 사각형의 값을 빈 값에서 "X"로 변경하려고 합니다. 지금까지 보드를 구축한 방식으로는 각 사각형을 업데이트하는 코드를 아홉 번 복사하여 붙여넣어야 합니다. 대신에 복사 및 붙여넣기 대신에 React의 컴포넌트 아키텍처를 사용하여 코드를 깔끔하게하고 중복을 피할 수있는 재사용 가능한 컴포넌트를 만들 수 있습니다.

먼저, Board 컴포넌트에서 첫 번째 사각형을 정의하는 줄(<button className="square">1</button>)을 가져와서 새로운 Square 컴포넌트를 만들어야합니다.

function Square() {
  return <button className="square">1</button>;
}

export default function Board() {
  // ...
}

그런 다음 JSX구문을 사용하여 Square 컴포넌트를 렌더링하도록 Board 컴포넌트를 수정합니다.

// ...
export default function Board() {
  return (
    <>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
    </>
  );
}

이제 각 사각형에는 "1"이 표시됩니다. 이 문제를 해결하려면 props를 사용하여 각 사각형이 상위 구성 요소(Board)에서 하위 구성 요소(Square)로 가져야 하는 값을 전달합니다. Square 컴포넌트가 Board에서 보내는 value prop를 읽을 수 있도록 수정합니다. JSX에서 "Escape JavaScript"하려면 중괄호가 필요합니다. 다음과 같이 JSX에 중괄호를 추가하세요.

function Square({ value }) {
  return <button className="square">{value}</button>;
}

지금은 빈 보드가 표시됩니다. 이는 Board 컴포넌트가 아직 렌더링하는 각 컴포넌트에 value prop를 전달하지 않았기때문 입니다. 각Square 컴포넌트에 렌더링할 value prop를 더해줍니다.

export default function Board() {
  return (
    <>
      <div className="board-row">
        <Square value="1" />
        <Square value="2" />
        <Square value="3" />
      </div>
      <div className="board-row">
        <Square value="4" />
        <Square value="5" />
        <Square value="6" />
      </div>
      <div className="board-row">
        <Square value="7" />
        <Square value="8" />
        <Square value="9" />
      </div>
    </>
  );
}

2.3 상호작용 컴포넌트 만들기

Square 컴포넌트를 클릭하면 x로 채워지게 해보겠습니다. Square 안에 handleClick이라는 함수를 선언해줍니다.그런 다음, Square에서 반환된 button JSX 요소의 props에 onClick을 추가합니다.

function Square({ value }) {
  function handleClick() {
    console.log('clicked!');
  }

  return (
    <button
      className="square"
      onClick={handleClick}
    >
      {value}
    </button>
  );
}

이제 square를 클릭하면 콘솔로그탭에서 clicked! 라고 띄워지는 것을 확인할 수 있습니다. 다음 단계에서는 Square 컴포넌트가 클릭되었음을 "기억"하고 "X"표시로 채우도록 합니다. 사물을 "기억"하기위해 컴포넌트는 상태state를 사용합니다. React은 컴포넌트에서 호출하여 항목을 "기억"할 수 있는 특수 함수 useState를 제공합니다. Square의 현재 값(value)을 상태(state)에 저장하고, Square가 클릭 될 때 값(value)을 변경해 봅시다.

파일의 맨 위에 useState를 import합니다. 그리고 Square 컴포넌트에서 value prop을 제거합니다. 대신, Square 시작 부분에 useState를 호출하는 새로운 줄을 추가합니다. 이것은 value라는 상태 변수(state variable)를 반환해야합니다.

import { useState } from 'react';

function Square() {
  const [value, setValue] = useState(null);

  function handleClick() {
    //...

value 는 값을 저장하고 setValue는 값을 변경하는 데 사용할 수 있는 함수입니다. useState에 전달된 null은 상태 변수의 초기 값으로 사용되므로 여기서 처음에 value는 null과 같습니다. Square 컴포넌트가 더이상 props를 받지 않기에 value prop를 제거합니다.

// ...
export default function Board() {
  return (
    <>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
    </>
  );
}

이제 Square를 클릭하면 "X"가 표시되오록 변경합니다. 이벤트 핸들러의 console.log("clicked!")를 setValue('X')로 바꿔줍니다.

function Square() {
  const [value, setValue] = useState(null);

  function handleClick() {
    setValue('X');
  }

  return (
    <button
      className="square"
      onClick={handleClick}
    >
      {value}
    </button>
  );
}

클릭 핸들러(onClick 핸들러)에서 이 set 함수를 호출함으로써 React에게 해당 <button>이 클릭될 때마다 해당 Square를 다시 렌더링하도록 알립니다. 업데이트 후에는 Square의 값이 'X'가 되므로 게임 보드에 "X"가 표시됩니다. 아무 Square에나 클릭하면 "X"가 나타날 것입니다.각 Square는 고유한 상태를 가지고 있습니다: 각 Square에 저장된 값은 완전히 독립적입니다. 컴포넌트에서 set 함수를 호출하면 React가 자동으로 내부의 하위 컴포넌트도 업데이트합니다.

'React' 카테고리의 다른 글

React .03 : UI 이해하기 - Component 이해하기 (0)	2024.03.19
React .03 : Thinking in React (0)	2024.03.11
React .02 : Tutorial : Tic - Tac -Toe(3) (0)	2024.03.08
React .02 : Tutorial : Tic - Tac -Toe(2) (0)	2024.03.08
React .01 : intro-Quick start (0)	2024.03.04

개발하는 환두