클래스 컴포넌트 ( class component )

React에서 컴포넌트를 Class와 Function으로 모두 만들 수 있다.

Class는 React에서 제공하는 Component라는 클래스를 extends, 상속해서 만들 수 있다.
Function은 간단하게 함수로 만들 수 있습니다.

Class에는 상태 즉 데이터를 담을 수 있는 state라는 오브젝트가 들어있습니다. 그래서 state의 내용이 업데이트 될 때마다 렌더 함수가 호출이 되면서 업데이트된 내용이 보여지게 됩니다.

반면 함수에는 그런 기능이 없다. 하지만 리액트 16.8 버전부터 React Hook이 도입되면서 함수에서도 useStae, useEffectg등 스테이트도 가지고, 라이프사이클 메소드도 사용할 수 있게 되었습니다.. 기존의 클래스 컴포넌트에서만 할 수 있었던 것들을 함수형 컴포넌트에서도 할 수 있도록 해준 것이 바로 이 React Hook이라고 합니다.

클래스를 이용하면 맴버변수에 접근할 때 항상 this 바인딩을 해야하는데, 이렇게 반복적으로 호출하는 것이 너무 불편하기도 했다고 합니다. 그리고 많은 사람들이 fucntional programming이 유행하고 있으니 도입된 것이 React-Hook 이라고 합니다.

클래스 컴포넌트 실습

import {component} from 'react'

export default class ClassCounterPage extends Component {
	// class 변수의 선언 방식
	state = {
				count : 0,
			}

	// class에서의 함수 사용방식 
		onClickCouter = ()=>{
				console.log(this.state.conut)
				this.setState(((prev))=>({
						count : this.state.count(=prev.count) +1
			}))
		}

	// 화면 그리는 부분
	render(){
		return(
			<div> 
				// this는 class 자기자신을 뜻합니다.
					<div>현재 카운트 : {this.state.count}</div>

				// 직접 바인딩 하실때는 onClick={this.onClickCouter.bind(this)} 라고 적어주셔야 합니다.
					<button onClick={this.onClickCouter}>카운트 올리기</button>
			</div>
			)
		}
	}

• 클래스 컴포넌트에서는 function이란 말을 안쓰고 바로 함수 이름이나 변수를 선언해 줍니다.

• state도 따로따로 다 만드는 것이 아니라 state하나 선언하고 그 안에 다 넣어둡니다.

• 클래스 컴포넌트 안에서 선언한 걸 함수 또는 state를 쓸 때 자동완성으로 this가 붙- 는데 이는 해당 클래스 안에서 선언한 것이라는 뜻, 즉 안에서 선언된 모든 것들은 앞에 this가 생략되어 있다고 생각하면 됩니다.

• 해당 코드에서 this. 해보면 선언하지 않은 요소들이 다양하게 많은데 이는 부모에게서 상속받아온 것들(Component = 부모)

this 바인딩( .bind(this) )

this는 자기 자신을 뜻하기 때문에 여기저기 다 속해있지만 실행이 되었을 때 실행주체에 따라서 그때 그때 바뀌게 됩니다

예를 들어 button을 눌러서 onClick함수가 실행되어 this.count를 호출하려고 하면 this.count란 선언한 state.count를 호출하는게 아닌 button.count를 뜻하게 됩니다

즉, 실행하는 주체에 따라서 this가 다르게 나옵니다.

이렇게 바뀌는 this를 동적 this라고 합니다.

따라서 onClickCouter 를 클릭시에 this가 onClickCouter로 바뀌게 됩니다.

변화하는 this를 class로 고정하기 위해서는 this를 바인딩해주시거나 화살표 함수를 써주셔야합니다.

이렇게 바인딩 과정을 거쳐서 고정된 this를 렉시컬 this라고 합니다.

1. this 바인딩 시키기

.bind(this)로 함수의 this를 어떤 this를 쓸지 연결해주기

this.onClickCountUp.bind(this)

2. 화살표 함수 () ⇒ {} 로 변경

화살표 함수 안에서 사용하면 .bind(this)없이 바깥의 this를 자동으로 연결

class ClassCounterPage {
      count = 10

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

      render() {
        const button = document.createElement("button"); // 원래는 이런식으로 작성이 되어야 하는데 jsx로 간편하게 작성하면 알아서 이렇게 바꿔주는 것이 react!
        button.innerText = "카운트 올리기!!";
        button.count = 100
        button.addEventListener("click", this.onClickCountUp)
        document.body.appendChild(button)
      }
    }
    window.onload = () => {
      const counter = new ClassCounterPage();
      counter.render();
    }