[React] class형 컴포넌트

 

우리는 class컴포넌트와 함수형 컴포넌트 둘 다 사용할 수 있는데, 리액트에서도 함수형 컴포넌트 사용을 추천하고 있다. 허나 이전에 만든 프로젝트가 있다면 class컴포넌트를 사용했을 것이고, 그것을 유지보수 하기위해서는 class컴포넌트도 알아야 유지보수가 가능하다.

 

 

import React, { Component } from "react";

class CounterClass extends Component {
  //첫번째 방법
  // constructor(props) {
  //   super(props);
  //   // bind작업을 하면 만약에 이 함수에서 this를 가르키게 된다면 constuctor에서 this를 가르키게 해라라는 의미
  //   this.handleIncrease = this.handleIncrease.bind(this);
  //   this.handleDecrease = this.handleDecrease.bind(this);
  // }
  // handleIncrease() {
  //   console.log(this);
  //   console.log("increase");
  // }
  // handleDecrease() {
  //   console.log("decrease");
  // }

  // //두번째 방법
  // constructor(props) {
  //   super(props);
  //   // state는 무조건 객체형태여야 한다.
  //   this.state = {
  //     counter: 0,
  //   };
  // }
  // handleIncrease = () => {
  //   // 상태를 바꿀 때는 setState를 사용하여 현재의 counter를 조회해서 더해주어야한다.
  //   this.setState({
  //     counter: this.state.counter + 1,
  //   });
  // };
  // handleDecrease = () => {
  //   this.setState({
  //     counter: this.state.counter - 1,
  //   });
  // };

  //세번째 방법
  // BABEL plug-in으로 사용한 방법 class properties라는 문법이다.
  state = {
    counter: 0,
    fixed: 1,
  };
  handleIncrease = () => {
    // 상태를 바꿀 때는 setState를 사용하여 현재의 counter를 조회해서 더해주어야한다.
    this.setState({
      counter: this.state.counter + 1,
    });
  };
  handleDecrease = () => {
    this.setState({
      counter: this.state.counter - 1,
    });
  };

  render() {
    return (
      <div>
        <h1>{this.state.counter}</h1>
        <button onClick={this.handleIncrease}>+1</button>
        <button onClick={this.handleDecrease}>-1</button>
        <p>고정된 값 : {this.state.fixed}</p>
      </div>
    );
  }
}

export default CounterClass;

 

setState를 사용하면 함수형 컴포넌트를 사용할 때, 불변성을 유지해주기 위해서 spread를 사용해주었는데 그것을 사용하지 않아도 해당 값만 바뀐다.

 

허나 state값 객체 안에 객체가 들어간다고 가정하고, 안의 객체 속 값이 바뀐다면 불변성을 유지해주어야한다.

state = {
    counter: 0,
    fixed: 1,
    updateMe: {
      toggleMe: false,
      dontChangeMe: 1,
    },
  };
  
handleToggle = () => {
    this.setState({
      updateMe: {
        ...this.state.updateMe,
        toggleMe: !this.state.updateMe.toggleMe,
      },
    });
  };

 

또, setState에서 화살표 함수를 쓸 수 있는데,

handleIncrease = () => {
  this.setState((state) => ({
    counter: state.counter + 1,
  }));
  this.setState((state) => ({
    counter: state.counter + 1,
  }));
  this.setState((state) => ({
    counter: state.counter + 1,
  }));
};

handleDecrease = () => {
  this.setState({
    counter: this.state.counter - 1,
  });
  this.setState({
    counter: this.state.counter - 1,
  });
  this.setState({
    counter: this.state.counter - 1,
  });
};

 

setState는 단순히 상태를 바꾸는 함수가 아니라, 설정해준 상태로 요청하는 함수로 이해해야한다. 성능적인 이유때문에 리액트는 바로 업데이트가 되지않고, 비동기적으로 실행하기 때문입니다.

위와 같이 작성하면 handleIncrease 함수에서는 +1이 3번 실행되어 3이 더해지지만, handleDecrease 함수에서는 -1이 한번만 실행합니다.