React-Study

class를 이용한 문법

---

🕵️ React Class 문법을 이용한 컴포넌트 생성이다.

클래스 문법은 궁금증 시리즈에 constructor() , super() , render() 의 사용이유를 다루었다. 참고

일단 간단하게만 쓰자면 class문법은 변수 와 함수를 많이 보관하는 보관함이라고 생각하면 된다. 기본 구성이라고 외우면 되는데 안에는 constructor() , super() , render() 가 들어간다.

state

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

을 만들어서 AppComponent의 return문 안에<Modal2/> 를 넣게되면

this.state로 만든 name이 <div>안녕{this.state.name}</div> 으로 인해 화면에 안녕 kim이 나타나게 된다.

setState

return(
      <div id="pr">안녕{this.state.name}
        <button onClick={()=>{
          this.setState({name : 'joo'})
        }}>버튼</button>
      </div>
    )

setState를 사용하여 state를 변경할 때 사용한다. 위에 state예제에서 아래에 setState의 코드를 추가한다. 버튼을 누르면 onClick이벤트가 발생하고 onClick이 되면 this.setState의 name이 joo로 변경된다. 라는 뜻이다.

기존 state의 값을 바꾸는게 아니라 기존 state의 변경사항만 반영해준다.

props

Component를 이용할 때 props로 보낼수도 있다.

constructor(props){
	super(props)

부모컴포넌트에서 받은 props는 생성자함수인 constructor와 super에 props를 쓰고

<div>안녕 {this.props}</div>

이렇게 사용하여 props를 받는다.

---