React- 클래스형 컴포넌트로 카운터 만들기

※ 강의를 듣고 제가 이해한 내용을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

클래스형 컴포넌트로 카운터 만들기

ClassCounter.js

import React, { Component } from 'react';

class ClassCounter extends Component {
    constructor(props) { // 상태관리
        super(props);
        this.state = { // 상태, state의 형태는 무조건 객체 형태여야 한다.
            counter: 0 // 초기값
        };
    }

    handleIncrease = () => { // state로 사용하기 위한 커스텀 메서드를 만들수 있음, 화살표 함수로 해야 이벤트로 연결 해줄때 인스턴스와 this가 안 끊김
        this.setState({ // 상태를 바꾸기 위한 함수
            counter: this.state.counter + 1 // 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>
            </div>
        );
    }
}

export default ClassCounter;

클래스형 컴포넌트에서 상태를 선언할 때는 위 코드처럼 constructor 내부에 this.state를 설정하면 된다.

 

그리고 나서 이벤트 기능을 구현하기 위한 메서드를 구현할 때는 화살표 함수로 구현 해준 뒤

함수 내부에 this.setState를 설정하고 그 안에  상태 초기값을 조회한 뒤 +1 또는 -1을 시켜주는 코드를

써주면 된다. ( 위 코드 참고 )

 

그리고 버튼 태그에 onClick 이벤트를 설정해주고 현재 값을 화면에 표시해주기 위해 상태를 h1태그에 현재 상태 값을 위 코드와 같이 적어주면 된다.

 

 

App.js

import React, {Component} from 'react';
import ClassCounter from './components/ClassCounter';

class App extends Component {
  render() {
    return (
      <div>
        <ClassCounter/>
      </div>
    )
  }
}

export default App;

그리고 App.js 파일에서 만든 카운터 컴포넌트를 불러와 주면 된다.

 

 

실행 결과