6. 클래스 컴포넌트에 값 할당, 함수, 버튼에 함수 바인딩, state

 

import { Component } from "react";

class Counter extends Component {

  constructor(props) {

    super(props);

    this.state = {

      number: Number(props.number),

    };

  }

 

  increase = ()=>{

    this.setState({

      number : this.state.number+1

    });

  }

  decrease = ()=>{

    this.setState({

      number : this.state.number-1

    });

  }

  render() {

    // console.log(this.state);

    return (

      <>

        <h2>사용 상품 수량 </h2>

        <h3>수량 : {this.state.number}</h3>

        <button onClick={this.increase}>+1</button>

        <button onClick={this.decrease}>-1</button>

      </>

    );

  }

}

여기 보면

생성자에서 props 해서 받아온다.

부모가

<Counter number='20'></Counter>

이렇게 속성에 값을 주면

  constructor(props) {

    super(props);

    this.state = {

      number: Number(props.number),

    };

  }

이렇게 생성자에 속성들(props) 받아서,

super(props) 하는데,

이게 옛날에는 명시적으로 super(props) 해서 속성 부모로부터 명시된거 받는 거 이렇게 넘겨줘야 됐었는데,

지금은 그냥 super()만 해도 된다고 함.

 

여튼, 저렇게 super() 해야, 초기화가 됨.

그래야 state나 이런 거 잘 초기화 되서, 사용할 수 있음.

 

그리고,

  increase = ()=>{

    this.setState({

      number : this.state.number+1

    });

  }

이거 보면 메소드가 아니라 변수에 콜백함수로 넣는데,

이렇게 하는 이유는 this의 동작때문임.

변수에 익명함수 넣는 것은 결국 그래도 변수이기 때문에, this는 이걸 호출한 것의 인스턴스를 가리키는데,

정통적인 메소드에서는 this의 동작이 좀 다름.

 

전통적인 메소드에서는 this를

bind, call, apply 등 명시적으로 해주지 않으면 undefind임. 그래서 옛날엔

this.increase = this.increase.bind(this);

이런 식으로 바인딩 해서 사용하기도 했었음.

 

여튼 그냥 함수는 필드에 익명함수 쓰는 방식으로 쓰셈.

this 쓸 경우가 많을 것 같아서.

 

    this.state = {

      number: Number(props.number),

    };

이거는 state를 설쟁해 주는 것 인데, 어.. 그러니까 이게 일종의 필드 같은 거 같음.

state 안에다 필드 모아놓는 느낌.

거기다 props로 들어온 거, Number로 파싱해서 넣어줌.

 

근데 저 state는 정적인거임.

그러니까, 반응형이 아님.

이거 반응형으로 바꾸려면,

super()하면 초기화 해 주는 데, 여기서 제공해 주는 것 중에 setStatus()라는 것이 있음.

    this.setState({

      number : this.state.number+1

    });

이렇게 바꾸고 싶은 state에다가 

setState 해서 바꾸도록 해 주면 됨.

원래 state의 number에 1을 더하도록 했음.

 

그 다음,

  render() {

    return (

      <>

        <h2>사용 상품 수량 </h2>

        <h3>수량 : {this.state.number}</h3>

        <button onClick={this.increase}>+1</button>

        <button onClick={this.decrease}>-1</button>

      </>

    );

  }

그냥 호출해서 쓰면 됨.

 

 

 

만약 반응형인, 그러니까 참조한 값이 바뀌면 그것을 곧바로 render 상에도 반영하고 싶다면,

state를 이용해야 한다.

그냥 값을 넣으면 처음 한번만 그 값으로 render되고 그 이후는

값을 동적으로 바꿔도 html에 반영되지 않는다.