IT_susu

Taking Turns 턴 가져오기 We now need to fix an obvious defect in our tic-tac-toe game: the “O”s cannot be marked on the board. 틱택토 게임에서 명백한 결함을 고칠 필요가 있다.: O가 board에서 만들어지지 않는다. We’ll set the first move to be “X” by default. We can set this default by modifying the initial state in our Board constructor: 첫번째 이동은 기본적으로 X로 설정된다. 이 기본 설정을 board 생성자함수에서 초기 state를 수정함으로써 설정할 수 있다. Each time a player moves..

Function Components 함수 컴포넌트들 We’ll now change the Square to be a function component. 우린 이제 square를 함수형 컴포넌트로 바꿀 수 있다. In React, function components are a simpler way to write components that only contain a render method and don’t have their own state. Instead of defining a class which extends React.Component, we can write a function that takes props as input and returns what should be rendered. ..

Why Immutability Is Important 불변의 중요성 In the previous code example, we suggested that you use the .slice() operator to create a copy of the squares array to modify instead of modifying the existing array. We’ll now discuss immutability and why immutability is important to learn. 이전 코드 예제에서, 우리는 slice() 명령어를 사용해서 존재하는 배열을 수정하는 것 대신 수정한 squares 배역을 복사해야 한다고 주장했었다. 이제 불변성과 불변의 중요성에 대해 토론해보자. There ..

We will now use the prop passing mechanism again. We will modify the Board to instruct each individual Square about its current value ('X', 'O', or null). We have already defined the squares array in the Board’s constructor, and we will modify the Board’s renderSquaremethod to read from it: renderSquare(i) { return ; } 우리는 전달하는 메커니즘인 prop을 한번 더 사용할 것이다. 우리는 Board를 수정할 것이다. 각각의 square에게 현재 value값..

Completing the Game 게임 완성하기 We now have the basic building blocks for our tic-tac-toe game. To have a complete game, we now need to alternate placing “X”s and “O”s on the board, and we need a way to determine a winner. 우리는 이제 틱택토 게임의 토대를 쌓았다. 게임을 완성하기 위해서, 우리는 X와 O를 번갈아가며 보드에 놓는 것이 필요하고, 승자를 결정하는 방법이 필요하다. Lifting State Up state를 들어 올리다 Currently, each Square component maintains the game’s state..

Developer Tools 개발자 도구 The React Devtools extension for Chrome and Firefox lets you inspect a React component tree with your browser’s developer tools. 리액트 개발자 도구 크롬이나 파이어폭스용 확장버전은 너가 너의 브라우저 개발자 도구에서 리액트 컴포넌트 구조를 검사할 수 있게 해준다. The React DevTools let you check the props and the state of your React components. 리액트 개발자도구는 리액트 컴포넌트의 props와 state를 확인한다. After installing React DevTools, you can right..

Making an Interactive Component 상호작용하는 컴포넌트 만들기 Let’s fill the Square component with an “X” when we click it. First, change the button tag that is returned from the Square component’s render() function to this: Square 컴포넌트에 X를 채워보자. 우리가 그것을 누를 때. 먼저, Square 컴포넌트의 render 함수로부터 반환된 버튼 태그를 바꾸자. If you click on a Square now, you should see an alert in your browser. 이제 너가 Square를 클릭하면, 너의 브라우저에서 aler..

Passing Data Through Props props를 통해서 데이터 넘기기 To get our feet wet, let’s try passing some data from our Board component to our Square component. 입문으로, board 컴포넌트에서 square 컴포넌트로 일부 데이터를 넘겨보자. We strongly recommend typing code by hand as you’re working through the tutorial and not using copy/paste. This will help you develop muscle memory and a stronger understanding. 우리는 너가 튜토리얼을 공부할 때 손으로 코드를 치면..

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를 열어라.(이미 s..

Overview 개요 Now that you’re set up, let’s get an overview of React! 설치했으니까 이제 리액트를 훑어보자! What Is React? 리액트란? React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. 리액트는 명료하고 효율적이고 유연한 자바스크립트 라이브러리다. 이는 유저 인터페이스를 만들기 위함이다. 리액트는 복잡한 UI를 작고 고립된 '컴포넌트'라 불리는 코드로 구성한다...