Skip to content

History

Jump to bottom
Siyeon Park edited this page Jun 1, 2021 · 1 revision

Tic Tac Toe

Date: 2021/06/01

개발 동기

React Document에 나와있는 자습서를 따라 만들면서 React의 기본적인 사용법을 익히기 위해서 시작했다. React의 경우 공식 문서가 굉장히 보기 쉽게 되어있다고 느꼈던 것도 만들기 시작한 이유 중 하나이다. 다만, 공식 문서에는 Class 형으로 작성되어 있는데, 나는 함수형으로 작성해보았다.

  1. Q) 함수형과 클래스형의 차이는?
    • 함수형이 클래스형 보다 메모리 사용을 덜 한다고 한다.
    • 가장 큰 차이는 함수형에서 state를 사용할 수 없다는 부분이었는데 hook 생기고나서 보완되었다.
    • 함수형이 적은 코드로 더욱 작성하기 편하다.
    • 공식 문서에서는 함수형 컴포넌트와 함께 hook 사용을 권장하고 있다고 한다.

디렉토리 구조

디렉토리 구조

몰랐던 것

  1. React에서 이벤트를 나타내는 prop에는 on[Event], 이벤트를 처리하는 함수에는 handle[Event]를 사용하는 것이 일반적이다.

    → 일반적으로 함수에 명명 방법 규칙이 있구나

  2. JavaScript 배열의 얕은 복사 (JS에서는 배열도 객체이다.)

Array.prototype.slice() - JavaScript | MDN

  1. 불변성

직접적인 데이터 변이를 피하는 것은 이전 버전의 게임 이력을 유지하고 나중에 재사용할 수 있게 만듭니다.

  1. 함수형에서는 () 가 필요없다?
const Square = (props) => {
	return (
		// 함수형에서는 왜 ()가 필요없지?
		<button className='square' onClick={() => props.onClick()}> 
			{props.value}
		</button>
	);
};
  1. at the top level이란?

말 그대로 제일 최상위를 의미 (쉽게 설명하면, code line number를 의미한다.)

  1. Hook은 React Component 안에서만 사용할 수 있다. (커스텀 hook 을 제외하고)

  2. react → state와 props 나누는 이유?

  3. 일반 변수는 함수가 끝나면 사라지지만, state 변수는 react에 의해서 사라지지 않는다.

  4. 배열 push() 함수와 같이 더 익숙한 방식과 달리 concat() 함수는 기존 배열을 변경하지 않기 때문에 이를 더 권장한다고 한다. concat에 대한 사용법 확인

여기서 step 이랑 stepNumber랑 다른 이유가 뭘까? 😅

const jumpTo = (step) => {
		setStepNumber(step);
		setIsPlayer(step % 2 === 0);
		console.log("player: " + isPlayer);
		console.log("step: " + step);
		console.log("stepNumber: " + stepNumber);
	};

비동기 image

useState의 비동기적 속성과 batching에 대한 예제 ⌨

import React, { useEffect, useState } from "react";

function App() {
  const [state1, setState1] = useState(1);
  const [state2, setState2] = useState(1);
  const [state3, setState3] = useState(1);
  const [renderCount, setRenderCount] = useState(0);

  const upState = () => {
    setState1(state1 + 1);
    setState2(state2 + 1);
    setState3(state3 + 1);
  };

  useEffect(() => {
    setRenderCount(renderCount + 1);
  }, [state1, state2, state3]);

  return (
    <div className="App">
      <button onClick={upState}>상태값 UP</button>
      <p>상태값1 {state1}</p>
      <p>상태값2 {state3}</p>
      <p>상태값3 {state3}</p>
      <p>랜더링 횟수 {renderCount}</p>
    </div>
  );
}

export default App;

[출처:: https://velog.io/@seongkyun/React의-setState가-비동기-처리되는-이유]

React는 batch update를 16ms 에 한 번 실행한다. 그 이유는 일정시간 동안 변화된 상태를 한꺼번에 랜더링하여, 랜더링 횟수를 줄이기 위해서이다. 따라서 setState등과 같은 method는 비동기적으로 실행되도록 제작되어있다.

느꼈던 것

처음에는 클래스형으로 작성을 했고, 그 다음에는 컴포넌트를 분리했다. 그리고 함수형을 적용했고, 또 다시 컴포넌트를 분리했다. 클래스형에서 함수형으로 넘어가는 과정에서 hook을 배워야만 했고, 실제로 해당 프로젝트에 스스로 적용하여 만들어보는 경험이 재미있었다.

jumpTo 매소드를 구현하면서, 처음에는 console.log 를 분명히 찍었는데, 다른 값이 나와 굉장히 당황했다. 개발을 하면서 React의 state와 같은 비동기 매소드에 대해서 이해할 수 있는 경험을 가졌다.

어떻게 보면, 개발을 나름 1년 이상 해왔지만, 이런 식으로 무언가를 만드는 과정을 전체적으로 기록한 경험은 처음이다. 빠르게 개발을 끝내는 것이 중요했기에 기록을 남기지 않았던 것인데, 개발을 빠르게 끝낸 만큼 내 머릿 속에서는 순식간에 지식이 사라졌다. 앞으로는 좀 더 기록을 남기면서 개발 공부를 체계적으로 해볼까 한다.

글 쓰는 것에 있어서 보완해야 할 점

  1. 어떤 시점에서 어떤 고민을 했는지 더욱 구체적으로 써야한다. 나중에 보면 어떤 시점에서 생각했는지 알 수가 없다.

참고

React | 틱택토 게임 만들기 (1/2)

자습서: React 시작하기 - React

Clone this wiki locally