Class component

개발공부를 제대로 시작한지 한달도 안된 나는 며칠전, 컴포넌트를 조립하는 방법을 찾다가 클래스형 컴포넌트를 처음보았다. 클래스형 컴포넌트를 적용하던 중 부딪힌 난관은 useState가 안된다는 것.

알고보니 클래스형 컴포넌트에서는 useState와 같은 hooks를 지원하지 않아서 따로 빼서 정의해줘야했다.

class형 컴포넌트에서 hooks를 사용하려면
extends 로 리액트에서 지원하는 Component를 임포트해서 사용해야한다.

class 함수명 extends Component{
	state = {
    
    }

	render(){
    	return()
    }

}

의 형태로 사용한다.
state의 이름은 바꿀수 없으며, setState는 선언해주지 않아도 자동으로 선언된다.

import { Component } from "react";

interface IState{
    count:number
}

export default class CounterPage extends Component {
    
    state = {
        count: 0
    }

    onClickCounter(){
        console.log(this.state.count)
        this.setState((prev:IState) =>({
            count: prev.count + 1,
        }))
    }

    render(){
        return(
            <div>
                <div>현재카운트 : {this.state.count}</div>
                <button onClick={this.onClickCounter}>카운트 올리기!!</button>
            </div>
        ) 
    }
}

이 컴포넌트는 실행되지 않는데, 이유는 this는 누가 실행을 시켰느냐에 따라 달라지는 동적스코프이기 때문이다.

이것을 해결하기 위한 방법 1. 함수를 화살표함수로 바꾼다.
2. onClick={this.onClickCounter.bind(this)} 을 넣어준다.

render()가 꼭 있어야하며, 여기에 JSX가 들어간다. 함수형 컴포넌트의 return() 부분과 같다.

ex) new Date()

class Date{
    getFullYear(){
    //연도 추출기능
    }
    getMonth(){
    // 월 추출기능
    }
    getDate(){
    // 월 추출기능
    }
}

Date.getFullYear() 내장객체로 사용
여기서 Data는 객체.
이런 방식으로 개발하는 것을 객체 지향 프로그래밍.
백엔드에서는 객체지향 프로그래밍(OOP) 방식 많이 사용함.

함수인데 function이 안붙은 것 => 매소드

functional Component

export default function 함수명(){

	return(
    )

}

의 형태로 사용한다.

컴포넌트를 조립하려고 검색해 본 것이었지만,
결론은 그냥 사용하던 함수형 컴포넌트의 return() 부분에 임포트해서 써주니까 됐다...
시도를 먼저 해봤어야...