React class 컴포넌트의 이해

📍최근에 React에서는 function함수를 사용하고
class컴퍼넌트는 사용하지 않아 사용하진 않는 것을 권장한다고 한다

📍그러나 이미 class형태로 작성되어져있을 경우들이 있어서 대략적인 문법 정도는 알고 있으면 도움이 될 수 있을 것 같아서 기록한다

[기본사용법]

1. class는 변수, 함수를 많이 보관할 수 있는 통이라고 생각하면 된다
2. constructor, super, render라고 작성하고 시작하면 됨
3. render안에 html을 작성해서 "함수이름"만 작성해도 return에 작성한 Html이 출력되는 방식이다

class 함수이름 extends React.Component {
	constructor(){
    	super ();
    }
    render(){
    	return(
        	<div>안녕</div>
       )
     }
   }
}

[state만드는 법]

super() 밑에 this.state 안에 object형태로 넣고 싶은 값을 넣어준다.

class 함수이름 extends React.Component {
	constructor(){
    	super ();
        this.state = {
        	name : 'kim',
            age : 20
        }
    }
    render(){
    	return(
        	<div>안녕{this.state.name}</div>
       )
     }
   }
}

==> 안녕kim이 출력됨 

[state 변경하는 법]

• 버튼을 누르면 state변경되는 코드

class 함수이름 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>
       )
     }
   }
}

=> 20이였던 숫자가 21로 수정 
변경할 부분만! 수정된다

[props 전달하는법 ]

• 매개변수 형태로 부모요소를 props로 받아와서 사용할 수 있음

class 함수이름 extends React.Component {
	constructor(props){
    	super (props);
        this.state = {
        	name : 'kim',
            age : 20
        }
    }
    render(){
    	return(
        	<div>안녕{this.state.age}
            	<button onClick={()=>{
                	this.setState({age : 21})
                	}}>버튼</button>
                </div>
       )
     }
   }
}