IT_susu

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를 작고 고립된 '컴포넌트'라 불리는 코드로 구성한다...

Setup for the Tutorial 튜터리얼 설정 There are two ways to complete this tutorial: you can either write the code in your browser, or you can set up a local development environment on your computer. 이 튜토리얼을 완성하는 2가지 방법이 있다 : 브라우저에서 코드를 쓰는 방법과 너의 컴퓨터의 로컬 개발 환경에서 설정할 수 있다. Setup Option 1: Write Code in the Browser 설정 선택지 1: 브라우저에서 코드 작성 This is the quickest way to get started! First, open this Starter Co..

Prerequisites 전제조건 We’ll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you’re coming from a different programming language. We’ll also assume that you’re familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes. 우리는 너가 html과 자바스크립트에 친숙하다고 가정하지만 너가 만약 다른 프로그래밍 언어기반이어도 따라올 수 있어야 한다. 또한 우리는 너..

What Are We Building? 무엇을 만들까? In this tutorial, we’ll show how to build an interactive tic-tac-toe game with React. 이 튜토리얼에서 우리는 리액트로 상호작용하는 tic-tac-toe 게임을 어떻게 만드는지 볼 것이다. You can see what we’ll be building here: Final Result. If the code doesn’t make sense to you, or if you are unfamiliar with the code’s syntax, don’t worry! The goal of this tutorial is to help you understand React and its sy..

Before We Start the Tutorial 튜토리얼을 시작하기 전에. We will build a small game during this tutorial. You might be tempted to skip it because you’re not building games — but give it a chance. The techniques you’ll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a deep understanding of React. 우리는 이 튜토리얼을 진행하는 동안에 작은 게임을 만들거야. 너가 게임을 만들지 않았기 때문에 넘어가려고 할수도 있지..

path가 중복되는 부분이 생기면 중복되는 것이 전부 로딩되므로 우리가 원하는 모습이 아닙니다. 따라서 switch문을 사용합니다. 라우트들을 switch 컴포넌트에 감싸면 매칭되는 첫번째 라우트만 보여주고 나머지는 보여주지 않습니다.