[React] 틱택토 게임을 통해 개념 다지기

목차

 

간단한 틱택토 게임 모습

첫 화면

 

게임 플레이 화면

 

코드 참고

https://github.com/sins051301/TIC_TAC_TO_GAME/tree/sucess/src

TIC_TAC_TO_GAME/src at sucess · sins051301/TIC_TAC_TO_GAME

코드는 틱택토게임 폴더를 확인하면 된다.

 

 

알아두면 좋을것 같은 부분을 설명하고자 한다.

 

스프레드 연산자를 활용한 접근

function deriveGameBoard(gameTurns) {
   //스프레드 연산자를 통해 이중 배열을 복사하는 방식
   //기존 배열을 복사해준 뒤 일부만 변경 
  let gameBoard = [...INITIAL_GAME_BOARD.map((arrays) => [...arrays])];
  // of를 통해 각 요소에 접근
  for (const turn of gameTurns) {
    const { square, player } = turn;
    //배열 디스트러쳐링을 통해 분해
    const { row, col } = square;
    gameBoard[row][col] = player;
  }
  return gameBoard;
}

 

배열에 새로운 값 추가하기

  function handleSelectSquare(rowIndex, colIndex) {
    setGameTurns((prevTurns) => {
      let currentPlayer = deriveActivePlayer(prevTurns);
		//배열에 새로운 값 추가하는 방법
      const updatedTurns = [
        //앞에 추가함으로써 마지막에 접근하기 용이
        //앞에 것이 가장 최신 것이므로 뒤에 복사한 배열 넣어주기
        { square: { row: rowIndex, col: colIndex }, player: currentPlayer },
        ...prevTurns,
      ];
      return updatedTurns;
    });
  }

 

배열에서 일부 값 바꾸어주기

  function handlePlayerNameChange(symbol, newName) {
    setPlayers((prevPlayers) => {
      return {
        //이전 객체 복사
        ...prevPlayers,
        //새로운 속성을 추가
        //키값: value값
        [symbol]: newName,
      };
    });
  }

 

key값의 동적인 생성 방법

//인자를 객체 형태롤 받아서 turns를 추출해야 하기 때문에 {}로 전달
function Log({ turns }) {
  return (
    <ol>
      {turns.map((turn) => (
        //key 값을 동적으로 생성 unique한 값임
        <li key={`${turn.square.row}${turn.square.col}`}>
          {turn.player} selected {turn.square.row} {turn.square.column}
        </li>
      ))}
    </ol>
  );
}
export default Log;

 

배열 연습하기 예시

const arr = [
  {
    name: "huaksu",
    age: 19,
  },
  {
    name: "shin",
    age: 23,
  },
];

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

//여기서 중괄호 {}는 함수 본문을 정의하는 데 사용됩니다.
//화살표 함수에서 중괄호를 사용하면 함수 본문을 명시적으로 작성하고,
// return 키워드를 사용하여 값을 반환해야 합니다.
function derive() {
  let info = arr.map((item) => {
    if (item.age === 23) {
      return { ...item, age: 26 };
    }
    return item;
  });
  return info;
}

function derive2() {
  let target;
  for (const element of arr) {
    if (element.age === 19) target = element;
  }
  return target;
}

function derive3(target, newAge) {
  return {
    //객체를 복사해옴
    ...arr[0],
    [target]: newAge,
  };
}

function matrixDerive() {
  const matrix2 = [...matrix.map((inner) => [...inner])];
  return matrix2;
}

function Practice() {
  let info = derive();
  let targetinfo = derive2();
  let editinfo = derive3("age", 188);
  let mat = matrixDerive();

  return (
    <div>
      {info.map((person, index) => (
        <div key={index}>
          Name: {person.name}, Age: {person.age}
        </div>
      ))}
      <p>
        {targetinfo.name}
        {targetinfo.age}
      </p>
      <p>
        {editinfo.name}
        {editinfo.age}
      </p>
      {/* 여기서 소괄호 ()는 JSX 내에서 반환할 표현식을 감싸는 데 사용됩니다. 
      소괄호를 사용하면 코드가 더 가독성이 좋아지고, JSX가 여러 줄에 걸쳐 있을 때 유용합니다. */}
      <p>{mat.map((row) => row.map((col) => <li>{col}</li>))}</p>
    </div>
  );
}

export default Practice;