React Tutorial; Tic-Tac-Toe

리액트 공식문서에 있는 튜토리얼 프로젝트를 로컬에서 직접 작성해보며 공부했다.

로컬에서 작업할 때에는 반드시 react, react-dom을 import 해주어야 한다.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';

 

class

공부했던 class와 일맥상통하는 부분이 있다. 다만 <> 괄호를 이용해서 해당되는 코드 전체를 element로 사용할 수 있다는 특징이 있다.

class ClassName extends React.Component {
	render() {
    	return()
    }
}

위와 같은 방식으로 작성되는 class의 기본 틀을 기억하자.

 

State

JS 클래스에서 서브클래스의 constructor을 정의하기 위해서는 항상 super 매서드를 호출해야한다. constructor을 포함하는 모든 리액트 컴포넌트 클래스는 super(props) 호출로 시작해야 한다.

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>
    );
  }
}

 

Immutability

부모 컴포넌트의 state를 최신화 하기 위해서 해당 state를 복사한 뒤 조작했다. 이러한 작업을 거치는 이유는 자료의 불변성을 유지하기 위해서이다. 데이터에 접근해서 수정하는 방법에는 두 가지가 있는데 첫 번째는 직접 접근해서 바로 수정하는 것이다. 두 번째는 기존 데이터에 그 데이터를 복사, 수정한 새로운 데이터를 붙여넣기 하는 방법이다. 이렇게 데이터의 불변성을 유지하는 데에는 세 가지 장점이 있다.

 

첫 번째, 프로그램에서 데이터를 되돌리는 작업은 흔히 일어난다. 불변성을 지킴으로서 이전 데이터를 보호할 수 있고 변경이 이후에도 다시 사용할 수 있는 장점이 있다.

두 번째, 변화를 감지하기 쉽다. 이전데이터와 현재 데이터를 비교하여 이러한 감지를 가능하게 한다.

세 번째, 불변성의 가장 중요한 점으로 하나의 컴포넌트는 불변성을 통해 순수한 컴포넌트가 된다. 불변성이 적용된 데이터는 변경되었을 때 쉽게 감지할 수 있으며(매서드 호출을 통해 이루어지기 때문) 때문에 언제 다시 랜더링 할지를 쉽게 결정할 수 있다.