(공식 리액트 튜토리얼 02) 시작 코드 살펴보기

in about Dev on ReactJS

공식 리액트 튜토리얼 번역


Inspecting the Starter Code

시작 코드 살펴보기


  • If you’re going to work on the tutorial in your browser, open this code in a new tab: Starter Code
    • 브라우저에서 튜토리얼을 작성하려면, 새 탭에서 코드를 연다: 시작 코드
  • If you’re going to work on the tutorial locally, instead open src/index.js in your project folder (you have already touched this file during the setup).
    • 로컬에서 튜토리얼을 작성하려면, 프로젝트 폴더의 src/index.js를 연다.


  • 시작 코드
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'));


  • This Starter Code is the base of what we’re building.
    • 이 시작 코드는 우리가 구현할 tic-tac-toe 게임의 기초가 된다.
  • We’ve provided the CSS styling so that you only need to focus on learning React and programming the tic-tac-toe game.
    • CSS style을 제공했으므로, React 학습과 tic-tac-toe 게임 프로그래밍에만 집중하면 된다.


  • By inspecting the code, you’ll notice that we have three React components:
    • 코드를 살펴보면, 세 가지 React 컴포넌트가 있음을 알 수 있다.


  1. Square
  2. Board
  3. Game


  • The Square component renders a single <button> and the Board renders 9 squares.
    • Square 컴포넌트는 하나의 <button>을 렌더링 한다.
    • Board 컴포넌트는 9개의 사각형을 렌더링 한다.
  • The Game component renders a board with placeholder values which we’ll modify later.
    • Game 컴포넌트는 board와 placeholder 값을 렌더링 한다.
    • 이는 나중에 수정할 것이다.
  • There are currently no interactive components.
    • 현재 대화형 컴포넌트는 없다.