React - (2) class component, render(), setState()

React에는 class component가 있다. 

우리는 React.Component를 상속받아서 class component를 만들 수 있다.

 

class App extends React.Component {
	render() {
    	return (
        	<h1>안녕! 난 HTML이야!</h1>
        );
    }
}

 

React는 자동으로 이 class의 render() 메소드를 호출하고 

render() 메소드만을 사용한다.

 

render() 는 기존 function component처럼 HTML을 반환하는 메소드이다.

 

state는 class component 안에 있는 오브젝트이다.

 

render() 메소드 내에서 state에 접근하고 싶을 때는 this를 사용하여 접근한다.

 

render() 메소드 내에서 class component의 다른 메소드에 접근할 때는 this를 사용하는데,

버튼을 클릭했을 때만 호출되려면 아래와 같이 메소드의 이름만을 적어주어야 한다.

(호출식으로 적으면 그냥 바로 호출되어 버림.)

 

  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의 값을 바꿀 때는 this.setState(인자는 오브젝트)만을 사용하여아 한다.

setState를 호출해야만 render가 호출되고 똑똑한 리액트가 바뀐 부분만 다시 render해주기 때문이다

 

setState가 자동으로 render를 호출한다는 점은 매우 중요하니 꼭 기억하라고 한다.

예제는 아래와 같다.

 

  state = {
    count: 0,
  };
  add = () => {
    this.setState((current) => ({
      count: current.count + 1,
    }));
  };
  minus = () => {
    this.setState({ count: this.state.count - 1 });
  };

 

이때 add에 사용된 current 방식이 최신 기법이고, 아래 minus는 부하가 걸리는 안 좋은 방법이라고 한다(정확한 이유는 아직 안배움)

 

그런데 자세히 보면 current 부분은, current를 인자로 받는 람다 함수인데 객체를 또 소괄호로 감싸고 있다.

이 람다식은 함수 바디를 딱히 쓰지 않고 바로 오브젝트를 반환하는 방식인데,

아마 오브젝트를 표시하는 방식과 함수 몸통을 표시하는 방법이 둘 다 중괄호로 쓰이다 보니

이것이 오브젝트라는 것을 명시하기 위해 중괄호를 또 다시 소괄호로 감싼 것 같다.