<React> class Component & state

Component는 2가지로 구분됩니다. 이전 시간까지 알아본 function Component가 있구요. 또 이번 시간부터 알아볼 class Component가 있습니다.

class Component

• state
  state는 Object이며 state Object에는 가변적인 data를 집어넣어 사용합니다.
• plus, minus
  class 안에 정의된 멤버 함수입니다.
• render
  class Component는 function Component와 달리 return 값을 render method를 사용해서 return해야 합니다. React는 Mounting될 때 class Component의 render method를 실행합니다. 또한 state 값의 변경이 감지되면 현재 Component와 자식 Component의 render함수를 호출하게 되는데요. virtual DOM tree와 비교하여 실질적으로 변화가 있는 Component에 대해서만 update가 이루어집니다.
• setState
  setState를 통해 state값을 업데이트할 수 있고 업데이트된 state값을 토대로 render함수가 호출되어 변경된 부분만을 refresh해줍니다. setState를 사용하지 않고 state값을 업데이트하면 render()함수가 호출 되지 않는것에 주의합니다.
  setState는
  • 콜백 함수를 사용하거나
    this.setState(객체를 return 하는 콜백 함수)
  • 직접 객체를 전달할 수 있습니다.
    this.setState({객체})
• onClick
  React element에서 이벤트를 처리하는 방법은 DOM element 이벤트 처리와 유사하지만 문법적인 차이가 있습니다.
  • 소문자 대신 camelCase를 사용합니다.
  • addEventListener를 호출하지 않아도 되고 rendering시에 리스너를 제공합니다.

React를 사용할 때 DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요가 없습니다. 대신, 엘리먼트가 처음 렌더링될 때 리스너를 제공하면 됩니다.
- React 공식 문서 -

app.jsx

Class Component 와 state를 이해하기 위해 버튼 click event에 따라 숫자가 변하는 Class Component를 만들어 보겠습니다.

• extends React.Component
  React.component로부터 App Component를 만든다는 의미입니다.

import React from 'react';

class App extends React.Component{
  state = {
    count : 0
  }

  plus = () => {
    //current는 state Object 전체를 의미합니다. 
    //this.state를 직접 이용해서 값을 변경하는건 위험합니다.
    this.setState(current => {
      return {count: current.count + 1}
    });
  }
  
  minus = () => {
    this.setState(current => {
      return {count: current.count - 1}
    });
  }
  
  render(){
    return (
      <div>
        <h1>count: {this.state.count}</h1>
        <button onClick = {this.plus}>Plus</button>
        <button onClick = {this.minus}>Minus</button>
      </div>
    );
  }
}