[Code Camp 4주차] Class / Functional Component

FE 08김우중·2022년 7월 29일
0

지금까지 Functional Component(함수형 컴포넌트)만 사용해왔는데
Class Component(클래스형 컴포넌트)라는 것도 존재하는걸 알게되었다.
둘의 차이점이 무엇인지 알아보자

Class Component

class란 객체이자 물건을 만드는 설명서라고 표현할수있다
class안에는 함수와 변수를 넣을수있고, 이 변수와 함수를 조합하여 하나의 물건을 만드는 방법을 적어둘수있다.
그리하여 만들어진 물건은 객체 또는 인스턴스라 부른다

import { component } from 'react'

//클래스에서는 공통 기능을 extends를 통해 상속할수있다
export default class ClassPage extends Component {
	
    // class에서의 변수의 선언 방식
    state = {
    	count : 0
    }
    
    // class에서의 함수 사용방식
    onClickEvent = () => 
    	console.log(this.state.count)
    }
    
    // 화면 그리는 부분
    render(){
    	return(
        	<div>
            	// this는 class 자기자신을 뜻합니다
            	<div>현재 카운트: { this.state.count }</div>
                <button onClick = { this.onClickEvent }>버튼</button>
            </div>
        )
    }
}
  • this 바인딩??
    위의 예제코드를 보면 this라는 처음보는것이 나온다.
    this는 말그대로 class 자기자신을 의미한다.
    this는 어디서 실행하냐에 따라서 변화하는 이슈가 있고, 실행하는 주체에 따라서 this가 다르게 나온다.
    이렇게 변화하는 this를 class로 고정하기 위해서는 this를 바인딩 해주거나 화살표 함수를 사용해야한다
profile
새내기 개발자

0개의 댓글