클래스형 컴포넌트, 함수형 컴포넌트

클래스형 컴포넌트

클래스형 컴포넌트란 리액트에서 정의하는 컴포넌트 종류중 하나이다
여기서 클래스란 객체이자 물건을 만드는 설명서리고 생각하면 된다

• 클래스는 변수,함수 사용시 const, function 같은걸 안붙인다

class Pokemon {
  power = 75
  attack() {
    console.log("몸통박치기!");
  }
}

Pokemon.power	//	75
Pokemon.attack()	//	"몸통박치기!"

위를 보면 Pokemon이라는 클래스에 power라는 변수와 attack라는 함수(메소드)가 들어있는 것이다

Pokemon : 객체 또는 인스턴스라고 부른다
Pokemon.power, Pokemon.attack() : 메소드라고 부른다

• 이미 만든 클래스를 상속받아서 추가로 새로운 기능들을 추가할수 있다
  이때 extaneds를 사용한다

class SuperPokemon extends Pokemon {
  power = 150
  PowerAttack() {
    console.log("백만 볼트!!");
   }
 }
 
SuperPokemon.power	//	150
SuperPokemon.attack()	//	"몸통박치기!"
SuperPokemon.PowerAttack()	//	"백만 볼트!!"

위와 같이 상속을 받은 attack()을 사용하고 또한 같이 상속받은 power를 덮어쓰기(오버라이딩)을 하여 사용한것이다

• 클래스형 컴포넌트의 this

  state = {
    count: 0,
  };

render()
    return (
        <div>{this.state.count}</div>
    );

클래스를 사용시에는 this를 붙여야 사용이 가능하며

  onClickCountUp = () => {
   console.log("현재 카운트", this.count)
  }

onClick={this.onClickCouter.bind(this)}

온클릭 같은 이벤트를 사용할때 .bind(this)를 사용하거나 화살표 함수를 사용해야 한다
사용하지 않을시 실행하는 주체 즉 버튼같은것들이 this가 되어서 버튼안의 count를 찾게된다

JSX 반환시 render()를 사용한다

export default class classComponent extends Component {
  state = {
    count: 10,
  };

  render() {
    return (
        <div>{this.state.count}</div>
    );
  }
}

---

함수형 컴포넌트

클래스형과 마찬가지로 리액트에서 정의하는 컴포넌트 종류중 하나이다

함수, 변수 선언 및 사용

const power = 75
const attack = () => {
	console.log("백만 볼트!!")
}

위와 같이 우리가 평소에 자바스크립에서 사용하던 대로 사용하면 된다

함수형 컴포넌트는 JSX반환시에 return()을 사용한다

const export default functionComponent() {

  	const count = 10
  
	return(
    <div>{count}</div>
    )
}

위와 같이 사용하면 된다

리액트 공식 메뉴얼에 따르면 함수형 컴포넌트 사용을 권장하고 있다
하지만 우리가 앞으로 다니게 될 회사가 class형 컴포넌트를 사용 할수도 있고, class형 컴포넌트를 함수형 컴포넌트로 전환 작업을 할수도 있기 때문에 class형 컴포넌트도 알아두어야 한다