class component

class App extends React.Component{

}

React class component에서 가져오고 있음.

 

function이 아니기 때문에 return을 가지고 있지 않음.

 

render method를 가지고 있음.

 

extends > react가 가진 컴포넌트를 app에 상속해준다고 보면 된다.

 

class App extends React.Component{
  render() {
    return <h1> Im a class component</h1>;
  }
}

render : App의 렌더가 어떻게 표시해줄 것인지 결정해주는 메서드.

바로 만들어 주는 것이 아닌, '이렇게 만들겠다' 라고 보면 된다.

 

 

function component와 class component의 차이

:function component는 function이고 무언가를 return 하지만,

: class component는 class 지만 react component로부터 확장되고 스크린에 표시된다. 그것을 render method 안에 넣어야 한다.

 

 

왜 간단한 function comp을 놔두고 class comp를 쓰는 걸까?

 

이유는 state 때문이다.

 

 

1.  state는 object 이다.

component의 data를 넣을 공간이 있고 이 데이터는 변한다.

 

class App extends React.Component{
  state = {
    count: 0
  }
  render() {
    return <h1> The number is { this.state.count}</h1>;
  }
}

이것은 class이기 때문에 괄호 안에 바로 {count}를 넣어주는 게 아니라, {this.state.count} 이런 식으로 넣어주어야 한다.

 

class App extends React.Component{
  state = {
    count: 0
  };
  
  add = () => { 
    console.log("add");
  };
  minus = () => { 
    console.log("minus");
  };

  render() {
    return (
      <div>
        <h1>The number is {this.state.count}</h1>
        <button onClick={ this.add}>ADD</button>
        <button onClick={ this.minus}>MINUS</button>
      </div>
    )
  }
}

---

state를 "직접" 변경하는 건 허락되지 않는다.

이렇게 할 경우 react는 render function을 refresh해주지 않는다.

 

즉, state 상태를 변경할 때 react가 render function을 호출할 수 있도록 해주어야 한다.

 

import React from "react";
import PropTypes from "prop-types";

class App extends React.Component {
  state = {
    count: 0
  };
  add = () => {
    this.setState({ count: this.state.count + 1 });
  };
  minus = () => {
    this.setState({ count: this.state.count + -1 });
  };
  render() {
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

**setState를 호출할 때마다 react는 새로운 state와 함께 Re render한다. 

 

그러나 this.state.count 처럼 state에 의존하는 식의 코딩은 권장되지 않는다.

 

import React from "react";
import PropTypes from "prop-types";

class App extends React.Component {
  state = {
    count: 0
  };
  add = () => {
    this.setState(current => ({ count: current.count + 1 }));
  };
  minus = () => {
    this.setState(current => ({ count: current.count - 1 }));
  };
  render() {
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

 

대신 function 방식으로 현재 state를 가져올 수 있도록 current를 써서 받아주도록 하자. (꼭 current가 아니어도 됨)