[React] class 문법

 

function App() {
  return (
    <div className="App">
      <Example/>
    </div>
  );
  
}

class Example extends React.Component{
  constructor(){
    super();
    this.state = { name : 'ex01', number : 10 }
  }


  render(){
    return (
      <div>
        <h3>예시입니당</h3>
        <p>{this.state.name}</p>
      </div>
    )
  }
}

export default App;

• state를 사용할 때 constructor로 생성하고 this를 많이 사용해서 구현한다.

 

 

class Example extends React.Component{
  constructor(){
    super();
    this.state = { name : 'ex01', number : 10 }
  }

//방법2의 함수
  setStateName(){
    this.setState( { name : 'example change function'} )
  }


  render(){
    return (
      <div>
        <h3>예시입니당</h3>
        <p>{this.state.name}</p>
        
        //방법1
        <button onClick={ () => { this.setState({ name : 'example changed!'}) }}>버튼!</button>
        
        //방법2
        <button onClick={ this.setStateName.bind(this) }>버튼2</button>
        
        
      </div>
    )
  }
}

• 리액트 최신버전에서는 [ state, setState ]로 변경함수를 묶어서 제공하지만 이전 버전에서는 setState를 사용할 때 방법 1, 2와 같은 방식으로 사용한다.

 

 

  // bind를 쓰고 싶지 않다면...
setStateName = () => {
	this.setState( { name : 'example change function'} )
}

• 방법 2 사용시 bind를 사용하지 않으려면 함수 만들 때 arrow function을 사용한다.