React :: 클래스 컴포넌트

클래스 컴포넌트 단축키 rcc

 

 

AppClass.js

import React, { Component } from 'react'

export default class AppClass extends Component {
  render() {
    return (
      <div>AppClass</div>
    )
  }
}

 

 

App.js

import React, { Component } from 'react';

export default class AppClass extends Component {
    //컴포넌트가 실행되자마자 바로 호출 된다
    constructor(props) {
        super(props);
        this.state = {
            counter2: 0,
            num: 1,
            value: 0,
        };
    }
    increase = () => {
        //전달할 객체 안에 this 붙여서 작성한다
        this.setState({ counter2: this.state.counter2 + 1, value: this.state.value + 1 });
    };
    render() {
        return (
            <div className="App">
                <div>state : {this.counter2}</div>
                <button onClick={this.increase}>클릭!</button>
            </div>
        );
    }
}

 

 

 

index.js

에서 파일명을 AppClass로 바꿔준다

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import AppClass from './AppClass';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <AppClass />
    </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

 

클릭할 때 마다 카운터 올라감