[React] 클래스 컴포넌트 (Class Component)

함수형 컴포넌트 이전에 사용했던 방법으로

클래스 이름을 적고 React.Component를 상속 받아서 사용

 

장점 : 상태 변경될 때마다 렌더 함수만 호출되고 기존 멤버 함수는 유지됨

 

import React from 'react';
import Counter from './basic/components/Counter';

export default class AppClass extends React.Component {
  state = { count: 0 };

  onClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  componentDidMount() {
    console.log('컴포넌트가 마운트 되었음!');
  }

  componentWillUnmount() {
    console.log('컴포넌트가 곧 언마운트될 예정임!');
  }

  render() {
    return (
      <div className='container'>
        <div className='banner'>
          Total Count: {this.state.count} {this.state.count > 10 ? '🔥' : '❄️'}
        </div>
        <div className='counters'>
          <Counter total={this.state.count} onClick={this.onClick} />
          <Counter total={this.state.count} onClick={this.onClick} />
        </div>
      </div>
    );
  }
}