Component 만드는 또 다른 문법 class

Component 만드는 또 다른 문법 class

현재는 컴포넌트를 만들 때 function을 사용하지만 예전에는 class문법도 사용했다.

그냥 알아두자

 

1. class 에 component 이름을 작명한다.

2. constructor, super, render 함수 3개를 채워 넣는다. (기본 템플릿 같은 것)

3. render return () 안에 JSX를 작성한다.

class Modal extends React.Component {
    constructor(){
    	super()
    }

    render(){
        return (
        	<div>Class문법이다</div>
        )
    }
}

 

class가 뭔가요?

class는 변수, 함수를 보관하는 장소다.

extends는 기존 class안에 있던 변수, 함수를 복사해주는 문법이다.

 

React.Component라는 class 안에 있던 변수와 함수들을 복사해야 component라고 인정해 주기 때문에

class 작명 extends React.Component 라고 쓰는 것

 

요즘은 function 문법 쓰니 잘 몰라도 됨

 

 

 

class 컴포넌트에서 state 만들기

1. this.state라는 변수를 만들고 그 안에 Object 형식으로 state를 쭉 나열한다.

2. state를 사용하고 싶으면 this.state.이름

class Modal extends React.Component {
    constructor(){
        super();
        this.state = {
            name : 'kim',
            age : 20
        }
    }

    render(){
        return (
        	<div> 안녕 { this.state.name } </div>
        )
    }
}

 

 

class 컴포넌트에서 state 변경하기

this.setState() 기본 함수를 이용한다.

소괄호 안에 새로운 state를 넣으면 state를 업데이트 해준다.

class Modal2 extends React.Component {
    constructor(){
        super();
        this.state = {
            name : 'kim',
            age : 20
        }
    }

    render(){
        return (
            <div>안녕 { this.state.age }
            	<button onClick={()=>{ this.setState({age : 21}) }}>버튼</button>
            </div>
        )
    }
}

 

 

class 컴포넌트에서 props 사용하기

1. constructor, super에 props 파라미터 등록

2. this.props 사용

class Modal2 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            name : 'kim',
            age : 20
        }
    }

    render(){
        return (
       		<div>안녕 { this.props.프롭스이름 }</div>
        )
    }
}