[ReactJS] 튜토리얼(Tutorial) - 1

튜토리얼(Tutorial) - 1

다음은 리액트 공식 홈페이지에서 튜토리얼로 올라와있는 틱택토이다.

틱택토 게임을 만들어 보면서 리액트의 특징과 주요 기능에 대해 알아보도록 하자

먼저 공식 문서에서는 리액트를 하기 전에 HTML이나 Javascript, 

그리고 최근에 출시된 Javascript ES6에 대한 일부 문법을 꼭 숙지해야 리액트를 원활하게 다룰수 있다고 한다.

따라서 사전 지식이 없을 경우 사전 학습을 통해 위의 언어를 꼭 배우고 넘어가도록 하자.

리액트 튜토리얼을 진행하기 위해 2가지 방법이 있는데,

첫째는 인터넷 브라우저에서 코드를 작성하는 방법이다.

이는 Codepen 등의 사이트에서 리액트 환경설정을 통해 코드 작성이 가능하다.

두번째는 개인 컴퓨터 환경(텍스트 에디터)에서 리액트 코드를 작성하는 방법이다.

인터넷 브라우저에서 하는 것보다 조금 복잡할수 있으며, 다음과 같은 스텝에 따라 환경을 구축해야한다.

1. Node.js의 최신버전을 설치한다.

2. npm의 create react app을 사용하여 기본적인 리액트 셋업을 한다.

3. 새로운 프로젝트의 /src 폴더 내부를 다 삭제한다.

create react를 사용해서 리액트 셋업을 하는 방법은 앞선 포스팅을 참고하기 바란다.

새로운 프로젝트의 /src 폴더 내부를 삭제하는 이유는 

기존에 생성된 파일들이 아니라 새로운 파일(tic-tac-toe)로 실행하기 위함이다.

body {
  font: 14px "Century Gothic", Futura, sans-serif;                                                    

  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

1~3까지 모든 과정이 끝났으면 src폴더 내에 index.css를 만들고 위의 코드를 작성해 준다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
 
class Square extends React.Component {                                                                  
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}
 
class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }
 
  render() {
    const status = 'Next player: X';
 
    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}
 
class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}
 
// ========================================
 
ReactDOM.render(
  <Game />,
  document.getElementById('root')
);
 

CSS 파일 생성이 완료되었으면 src 파일안에 index.js를 만들고 위의 코드를 넣어준다.

이것이 틱택토 게임을 실행하게 하는 코드들이다.

여기까지 과정을 마쳤으면 프로젝트 폴더 내부에서 npm strat라는 명령어를 입력한다.

그리고 http://localhost:3000에 접속하면 우리가 만든 틱택토 게임의 틀을 볼 수 있다.

단, 지금까지의 코드로는 틱택토 코드가 돌아가지 않을것이다.

왜냐하면 동작 코드는 생략하고 기본적인 뼈대만 만들었기 때문이다.

우리는 틱택토 게임을 완성해 가면서 리액트가 어떤 방식으로 동작하고, 

어떤 특징을 가지고 있는지에 대해서 알아볼 것이다.