[React document] tutorial : Overview

https://reactjs.org/tutorial/tutorial.html

Tutorial: Intro to React – React

 

react  공부를 시작한지 별로 안되긴 했지만 쨌든 기초지식이 너무 부족하다는 것을 스스로 느끼게 되어

튜토리얼 코드를 따라해보기로 했다.

 

튜토리얼은 react에서 제공한다. (위 링크 참고)

더보기를 클릭하면 원문을 볼 수 있다. 그 외의 본문은 원문을 내가 번역하면서 공부했다.

---

What is React?

(React란 무엇일까? 최근 어떤 분에게 이 질문을 들었는데 대답을 하지 못했다. 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”.

React has a few different kinds of components, but we’ll start with React.Component subclasses

 

We’ll get to the funny XML-like tags soon. We use components to tell React what we want to see on the screen. When our data changes, React will efficiently update and re-render our components.

Here, ShoppingList is a React component class, or React component type. A component takes in parameters, called props (short for “properties”), and returns a hierarchy of views to display via the render method.

 

The render method returns a description of what you want to see on the screen. React takes the description and displays the result. In particular, render returns a React element, which is a lightweight description of what to render. Most React developers use a special syntax called “JSX” which makes these structures easier to write. The <div /> syntax is transformed at build time to React.createElement('div'). The example above is equivalent to:

 

React는 UI 구축을 위한 선언적, 효율적, 유연한 자바스크립트 라이브러리의 하나이다. React를 이용하여 컴포넌트라고 불리는 작고 독립적인 코드조각들로 복잡한 UI들을 구성할 수 있다. React는 다양한 종류의 컴포넌트를 갖고 있지만 우리는 React.Component라는 서브클래스부터 시작할 것이다.

 

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

 

 

XML과 비슷한 태그들을 사용할 건데, 우리는 리액트에게 우리가 보고자 하는 것들을 말하기 위해 컴포넌트를 사용할 것이다. 우리의 데이터가 변할 때마다 리액트는 효율적으로 업데이트하고 우리의 컴포넌트들을 re-렌더링할 것임.

위 코드에서 ShoppingList는 리액트 컴포넌트 클래스 또는 리액트 컴포넌트 타입이다. 컴포넌트는 props라는 파라미터를 받음.

props는 properties의 줄임말이다. 그리고 컴포넌트는 render라는 메소드를 통해 보여주고자 하는 view들의 계층을 리턴한다.

 

 

render 메소드는 내가 스크린에 보고자 하는 description(내용)을 리턴한다. 리액트는 desc를 전달받아 결과를 보여준다. 특히 render는 렌더링하려는 내용들을 경량화한 React element를 리턴한다. 대부분의 리액트 개발자들은 이러한 구조들을 쉽게 작성하게 해주는 JSX라는 특별한 문법을 사용한다. <div /> 문법은 빌드할 때 React.createElement('div')로 변형된다.

 

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

 

If you’re curious, createElement() is described in more detail in the API reference, but we won’t be using it in this tutorial. Instead, we will keep using JSX.

 

JSX comes with the full power of JavaScript. You can put any JavaScript expressions within braces inside JSX. Each React element is a JavaScript object that you can store in a variable or pass around in your program.

The ShoppingList component above only renders built-in DOM components like <div /> and <li />. But you can compose and render custom React components too. For example, we can now refer to the whole shopping list by writing <ShoppingList />. Each React component is encapsulated and can operate independently; this allows you to build complex UIs from simple components.

 

 

만약 관심 있으면 API 레퍼런스에 자세하게 있으니 읽어봐라. 튜토리얼에선 다루지 않고 JSX문법을 쓸 것임.

JSX는 자바스크립트의 강력한 힘을 갖고 있다. 당신은 JSX 내부 {} 안에 자바스크립트 표현들을 넣을 수 있다.

각 리액트 element는 변수에 저장하거나 전달할 수 있는 자바스크립트의 객체이다.

 

ShoppingList 컴포넌트는 <div />나 <li />와 같은 built-in DOM 컴포넌트만 렌더링하지만 커스텀 컴포넌트들도 렌더링 할 수 있다. 예를 들어서 <ShoppingList />를 사용해서 전체 쇼핑리스트를 참조할 수 있다. 각 리액트 컴포넌트는 캡슐화되어 독립적으로 사용할 수 있다. 이 점은 단순한 컴포넌트로부터 복잡한 UI들을 구현할 수 있게 한다.

 

---

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).

This Starter Code is the base of what we’re building. We’ve provided the CSS styling so that you only need to focus on learning React and programming the tic-tac-toe game.

By inspecting the code, you’ll notice that we have three React components:

• Square
• Board
• Game

The Square component renders a single <button> and the Board renders 9 squares. The Game component renders a board with placeholder values which we’ll modify later. There are currently no interactive components.

 

만약 브라우저에서 튜토리얼을 작성한다면 Starter Code. 를 새로운 탭에 열어라.

로컬에서 한다면 프로젝트 폴더에 src/index.js를 열어라.

이 Starter Code는 우리가 구축하고자 하는 것의 기본 틀이다. CSS 스타일링은 제공되므로 React 배우는 것에 집중하자.

코드를 살펴보면 세 가지의 리액트 컴포넌트들을 알 수 있다.

 

• Square
• Board
• Game

Square 컴포넌트는 하나의 <button>을, Board 컴포넌트는 9개의 정사각형을 렌더링한다. Game 컴포넌트는 나중에 수정할 placeholder 값과 하나의 보드판을 렌더링한다. 현재는 인터랙티브한 컴포넌트들은 없다.

 

---

Passing Data Through Props

 

To get our feet wet, let’s try passing some data from our Board component to our Square component.

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.

In Board’s renderSquare method, change the code to pass a prop called value to the Square:

 

Congratulations! You’ve just “passed a prop” from a parent Board component to a child Square component. Passing props is how information flows in React apps, from parents to children.

 

 

우리의 board 컴포넌트로부터 Square 컴포넌트로 데이터를 전달해보자.

카피페이스트를 사용하지 않고 손으로 직접 코드를 작성하기를 강력하게 추천한다.

직접 작성하는 것이 근육 기억과 효과적인 이해에 도움이 된다.

Board의 renderSquare 메소드에서 Square에 값(prop)을 전달하기 위해 코드를 변경해보자.

 

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }
}

 

Change Square’s render method to show that value by replacing {/* TODO */} with {this.props.value}:

Square의 렌더 메소드를 값을 보여주기 위해 변경해라

 

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

 

코드를 변경하면 값들이 보임

 

축하합니다! 부모 Board 컴포넌트로부터 자식 Square 컴포넌트로 이제 prop을 전달했다.

props를 전달하는 것은 리액트에서는 부모로부터 자식으로 정보들을 흐르게 하는 것이다.

 

---

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:

 

As a next step, we want the Square component to “remember” that it got clicked, and fill it with an “X” mark. To “remember” things, components use state.

React components can have state by setting this.state in their constructors. this.state should be considered as private to a React component that it’s defined in. Let’s store the current value of the Square in this.state, and change it when the Square is clicked.

First, we’ll add a constructor to the class to initialize the state:

 

Now we’ll change the Square’s render method to display the current state’s value when clicked:

• Replace this.props.value with this.state.value inside the <button> tag.
• Replace the onClick={...} event handler with onClick={() => this.setState({value: 'X'})}.
• Put the className and onClick props on separate lines for better readability.

After these changes, the <button> tag that is returned by the Square’s render method looks like this:

 

By calling this.setState from an onClick handler in the Square’s render method, we tell React to re-render that Square whenever its <button> is clicked. After the update, the Square’s this.state.value will be 'X', so we’ll see the X on the game board. If you click on any Square, an X should show up.

When you call setState in a component, React automatically updates the child components inside of it too.

 

Square 컴포넌트를 클릭하면 X가 체크되도록 해보자. 먼저 Square 컴포넌트의 버튼 태그를 변경하자.

 

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>
        {this.props.value}
      </button>
    );
  }
}

 

 

 

다음 단계로 우리는 Square 컴포넌트가 클릭된 것을 기억하게 할 것이다. 그리고 X로 채우게 하자.

기억하게 하기 위해서 컴포넌트들은 state를 사용한다.

리액트 컴포넌트들은 그들의 생성자에서 this.state를 설정함으로써 state를 갖고 있다. this.state는 정의된 컴포넌트에 대해 private으로 고려되어야 한다. Square의 this.state의 현재 값을 저장해보고 클릭되었을 때 변경하게 해보자.

 

먼저 우리는 state를 초기화하기 위해 생성자를 더해주자.

 

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

 

Note

자바스크립트 클래스에서는 생성자를 정의할 때 항상 super를 호출해야 한다. 생성자를 갖는 모든 리액트 컴포넌트 클래스는 super(props)로 시작함.

 

 

 

이제 우리는 클릭되었을 때 현재 state의 value를 보여주기 위해 Square의 렌더 메소드를 변경할 것이다.

• button 태그 안에 this.state.value로 변경한다
• onClick 이벤트 핸들러도 변경한다
• 가독성을 위해 클래스이름과 이벤트 핸들러를 다른 줄에 넣는다.

세 개를 변경하면 버튼 태그는 아래와 같다.

 

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
        className="square"
        onClick={() => this.setState({value: 'X'})}
      >
        {this.state.value}
      </button>
    );
  }
}

 

 

Square의 렌더 메소드에서 onClick 핸들러로부터 this.setState를 호출함으로써 우리는 리액트에게 button 태그가 클릭될 때마다 리렌더링을 하라고 한다. update 후에 Square의 state.value는 'X'가 될 것이다.

그러면 우리는 게임 보드판 위에서 X를 볼 수 있다. 어느 square를 클릭하든 X가 보일 것이다.

setState를 호출할 때마다 리액트는 자동적으로 그 안에 있는 자식 컴포넌트도 업데이트한다.

 

---

 

Devleoper 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.

After installing React DevTools, you can right-click on any element on the page, click “Inspect” to open the developer tools, and the React tabs (“⚛️ Components” and “⚛️ Profiler”) will appear as the last tabs to the right. Use “⚛️ Components” to inspect the component tree.

React Developer Tools – Get this Extension for 🦊 Firefox (en-US)

크롬과 파이어폭스의 리액트 개발자도구는 리액트 컴포넌트 트리를 살펴볼 수 있게 한다.

 

 

 

리액트 개발자도구는 props들을 확인하고 리액트 컴포넌트들의 state도 볼 수 있다. 리액트 개발자도구를 설치하고 페이지의 아무거나 element를 클릭해봐라. 개발자도구의 inspect를 클릭하고 리액트 탭이 나타나있을 것이다.  ⚛️ Components로 컴포넌트 트리를 살펴봐라.

 

 

 

---