React 개념 및 TIC TAC TOE 만들기

React 기초

React란?

• 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaSrcript 라이브러리
• "컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도움
• 개별 컴포넌트는 props라는 매개변수를 받아오고 render 함수를 통해 표시할 뷰 계층 구조를 반환
  • render 함수란?
    • 화면에서 보고자 하는 내용을 반환하는 함수.
• 다수의 React 개발자는 "JSX"라는 특수한 문법을 사용하여 React의 구조를 보다 쉽게 작성
  • JSX란?

    

    • JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 카멜표기법을 사용.
      • 카멜표기법이란?
        • class -> className / tabindex -> tabIndex

컴포넌트(Component)란?

• 하드웨어처럼 "독립적인 기능을 수행하는 단위 모듈"을 의미함
• 소프트웨어의 재사용성을 높이고 유지보수를 용이하게 하기 위해 나온 기술로서 앱을 이루는 최소한의 단위
• props나 state와 같은 데이터를 입력받아 DOM 노드를 생성

props란?

• 상위 component에서 하위 component로 값을 전달할 때 사용한다.
• 하위 component는 전달받은 props값을 변경할 수 없기 때문에 read-only속성을 가진다.

state란?

• state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있음
• constructor 내에서 생성되며 컴포넌트가 호출될 때 제일 먼저 생성되고 state 값을 초기화 한 이후 render가 실행됨
• 만약 state나 props의 값이 변경되면 컴포넌트가 re-rendering된다.

state값 변경하는 법(아래에 자세히 설명 예정)

• setState를 사용하여 state 값을 변경
• 하위 컴포넌트에서 상위 컴포넌트의 state값을 변경하려면 이벤트 함수를 이용하여 값을 넘겨준 뒤 상위 컴포넌트의 이벤트 함수내에서 하위 컴포넌트가 전달한 매개변수로 받은 값을 setState를 이용하여 state의 값을 변경한다.

ex)

setState({
	mode: _mode
});

• 즉, 상위 컴포넌트-> 하위 컴포넌트: props로 전달(read-only) 하위 컴포넌트-> 상위 컴포넌트: event로 전달

컴포넌트의 종류

1. 함수형 컴포넌트

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

  2. 클래스형 컴포넌트

class Welcome extends React.Component {
  render() { /*클래스형은 rende함수 필수*/
    return <h1>Hello, {this.props.name}</h1>;
  }
}

• 주로 함수형 컴포넌트를 사용하지만, 함수형 컴포넌트로 하지 못하는 작업을 처리할 때 ES6 class를 사용한 "클래스형 컴포넌트"를 활용

render()란?

• 클래스형 컴포넌트에서 반드시 구현해야하는 유일한 메서드로 props와 state 값을 활용하여 값을 반환

Constructor란?

• 컴포넌트가 실행될 때 render()함수 이전에 실행되어 컴포넌트를 초기화 시켜주는 함수.
• state는 constructor() 안에 작성하여 컴포넌트가 실행될 때 제일먼저 초기화 시켜준다.

★ React에서 props나 state의 값이 바뀌면 state를 가지고 있는 컴포넌트의 render 함수가 다시 호출이 된다.-> 즉, props나 state가 바뀌면 화면이 다시 그려진다.

★ React.js, Vue.js 는 링크를 클릭하면 다른 url을 타고 이동하는 개념이 아니라 이벤트를 발생시켜 props와 state값을 변경 함으로서 페이지 전체가 re-rendering 되면서 페이지가 state와 props에 맞게 재 출력된다. 즉, SPA(Single Page App)의 역할을 하는 것이다.

이벤트 처리하기

• React의 이벤트는 소문자(onclick) 대신 카멜표기법(onClcik)을 사용한다.
• 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

ex)

<a href="/" onClick={function (e) {
    e.preventDefault(); // a-tag의 기본 동작인 page re-load 중지
    this.props.onChangePage();}.bind(this)}
>
   {this.props.title}
</a>

★ React에서는 반드시 preventDefault()를 호출해서 기본 동작을 방지해야 한다.

• a 태그는 페이지를 Reload하는 것이 기본 동작인데, React는 페이지를 Reload하는 것이 아닌 데이터만 변경하여 화면에 보여주는 것이기 때문에 반드시 위와같이 preventDefault()를 호출해서 기본 동작을 방지해야 한다.

.bind(this)

• 함수를 선언하였으나, 함수 내에서 this를 찾을 수 없을 때 function(){}.bind(this)를 적어주면 함수 내에서 this는 상위 컴포넌트가 된다.

.setState({})

• 이벤트 함수 내에서 state를 변경하고 싶을 때에는 this.state.mode = _mode 가 아닌 this.setState({mode : _mode}) 로 해야한다.
• this.state.mode = _mode는 생성자 내에서 사용하고 외부에서도 사용하면 값을 변경할 수는 있는데 React가 값이 변경되었는지를 몰라서 페이지 re-rendering이 안된다. 즉, 값이 변경되더라도 페이지 업데이트가 안된다.

e.target

• 속해있는 태그의 데이터 값을 받아올 수 있다.

• class TOC extends Component {
    render() {
      var lists = [];
      var data = this.props.data;
      var i = 0;
      while (i < data.length) {
        lists.push(
          <li key={data[i].id}>
            <a
              href={"/content/" + data[i].id}
              data-id={data[i].id}  // 1
              onClick={function (e) {
                // console.log(e.target.dataset.id);  // 2
                e.preventDefault();
                this.props.onChangePage(e.target.dataset.id);
              }.bind(this)}
            >
              {data[i].title}
            </a>
          </li>
        );
        i = i + 1;
      }
      return (
        <nav>
          <ul>{lists}</ul>
        </nav>
      );
    }
  }

  • 1번 data - 속성 으로 데이터를 저장하면 2번의 e.target내의 dataset을 통해 값에 접근할 수 있다.
  • 상위 컴포넌트에서 props로 받아온 값을 이벤트 함수를 통해 하위 컴포넌트에서 다시 상위 컴포넌트로 전달할 수 있다.

React로 TicTacToe 만들기

TicTacToe 만들기

• JavaScript 클래스에서 하위 클래스의 생성자를 정의할 때 항상 `super`를 호출해야합니다. 모든 React 컴포넌트 클래스는 `생성자`를 가질 때 `super(props)` 호출 구문부터 작성해야 합니다.
• DOM `<button>` 엘리먼트의 `onClick` 어트리뷰트는 내장된 컴포넌트라는 점에서 React에게 특별한 의미가 있습니다. Square같은 사용자 정의 컴포넌트의 경우 이름 지정은 자유롭습니다. Square의 `onClick` prop이나 Board의 `handleClick` 함수에는 어떤 이름도 붙일 수 있으며 코드는 동일하게 작동합니다. React에서 이벤트를 나타내는 prop에는 `on[Event]`, 이벤트를 처리하는 함수에는 `handle[Event]`를 사용하는 것이 일반적입니다.

.slice() 연산자

• slice() 메서드는 어떤 배열의 start부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환. 원본 배열은 바뀌지 않음.

불변성

일반적으로 데이터 변경에는 두 가지 방법이 있다. 첫 번째는 데이터의 값을 직접 변경, 두 번째는 원하는 변경 값을 가진 새로운 사본으로 데이터를 교체.

객체 변경을 통해 데이터 수정하기

var player = {score: 1, name: 'Jeff'};
player.score = 2;
// 이제 player는 {score: 2, name: 'Jeff'}입니다.

객체 변경 없이 데이터 수정하기

var player = {score: 1, name: 'Jeff'};

var newPlayer = Object.assign({}, player, {score: 2});
// 이제 player는 변하지 않았지만 newPlayer는 {score: 2, name: 'Jeff'}입니다.

// 객체 spread 구문을 사용한다면 이렇게 쓸 수 있습니다.
// var newPlayer = {...player, score: 2};

최종 결과는 동일하지만 직접적인 객체 변경이나 기본 데이터의 변경을 하지 않는다면 아래에 기술된 몇 가지 이점을 얻을 수 있다.

 

복잡한 특징들을 단순하게 만듦

불변성은 복잡한 특징들을 구현하기 쉽게 만듬. 자습서에서는 “시간 여행” 기능을 구현하여 틱택토 게임의 이력을 확인하고 이전 동작으로 “되돌아갈 수 있습니다”. 이 기능은 게임에만 국한되지 않는다. 특정 행동을 취소하고 다시 실행하는 기능은 애플리케이션에서 일반적인 요구사항 아다. 직접적인 데이터 변이를 피하는 것은 이전 버전의 게임 이력을 유지하고 나중에 재사용할 수 있게 만든다.

변화를 감지함

객체가 직접적으로 수정되기 때문에 복제가 가능한 객체에서 변화를 감지하는 것은 어렵다. 감지는 복제가 가능한 객체를 이전 사본과 비교하고 전체 객체 트리를 돌아야 한다.

불변 객체에서 변화를 감지하는 것은 상당히 쉽다. 참조하고 있는 불변 객체가 이전 객체와 다르다면 객체는 변한 것이다.

React에서 다시 렌더링하는 시기를 결정함

불변성의 가장 큰 장점은 React에서 순수 컴포넌트를 만드는 데 도움을 준다는 것이다. 변하지 않는 데이터는 변경이 이루어졌는지 쉽게 판단할 수 있으며 이를 바탕으로 컴포넌트가 다시 렌더링할지를 결정할 수 있다.