[TIL] 210726 오늘 공부는 클래스형 컴포넌트 특징

컴포넌트를 사용하는 방식은 두가지이다. 하나는 함수형 컴포넌트이고, 또 다른 하나는 클래스형 컴포넌트이다. 플젝에서는 함수형 컴포넌트만 사용했지만, 클래스형 컴포넌트도 알아두어야 할 것 같아서 "리액트를 다루는 기술"을 다시 보며 한번 정리해보고자 한다.

 

클래스형 컴포넌트의 선언 방식

class App extends Component {
	constructor(props){
    	super(props);
        this.state = {
        	//state로 지정해 줄 데이터
            foodList: ["피자", "치킨", "복숭아", "아이스크림"]
        }
    }
 	render() {
    	console.log(this.state);
        //foodList: ["피자", "치킨", "복숭아", "아이스크림"]
        <div className="App">
        	<h1>내가 제일 좋아하는 음식</h1>
            <컴포넌트명 list={this.state.foodList}/>
            //원하는 컴포넌트에 props로 foodList라는 state를 보낼 수 있음
        </div>
  	}
}

export default App;

 

클래스형 컴포넌트의 특징

 - class 키워드 필요

 - Component로 상속을 받는다(extends ~)

 - render() 메소드 필수 

 - 컴포넌트 내부에서 state 사용이 가능하다 . state는 객체 형식이며 update시에는 this.setState 사용

 - constructor() 존재 -> 컴포넌트의 생성자

 - Lifecycle method 존재