[React] 예전 Component 문법

예전 Component 문법

최신 Component 문법을 사용하는게 당연히 좋지만, 예전 Component 문법을 알고는 있는게 좋을 것 같아 간단하게 작성합니다.

---

class Profile extends React.Component {
  constructor(){
    super();
    this.state = { name : 'Kim', age : 30 }
  }

  render(){
    return(
      <div>
        <h3>프로필입니다</h3>
        <p>저는 { this.state.name } 입니다.</p>
        <button onClick={ () => { this.setState({ name : 'Park'}) } }>버튼</button>
      </div>
    )
  }
}

• constructor : class의 변수/초기값 저장할 때 사용
• state : constructor 안에 작성
• this.setState() : 값 변경할 때 사용하는 함수

---

• onClick에 함수를 적용하고 싶으면 다음과 같이 bind()로 함수를 찾아서 사용할 수 있습니다.

class Profile extends React.Component {
  // constructor : class의 변수/초기값 저장할 때 사용
  constructor(){
    super();
    // state는 constructor 안에 작성
    this.state = { name : 'Kim', age : 30 }
  }

  changeName() {
    this.setState({ name: 'Park'})
  }

  render(){
    return(
      <div>
        <h3>프로필입니다</h3>
        <p>저는 { this.state.name } 입니다.</p>
        <button onClick={ () => { this.changeName().bind(this) } }>버튼</button>
      </div>
    )
  }
}

---

• bind()를 사용하고 싶지 않다면, 함수에 arrow function을 적용하면 됩니다.

class Profile extends React.Component {
  constructor(){
    super();
    this.state = { name : 'Kim', age : 30 }
  }

   changeName = () => {
     this.setState({ name: 'Park'})
   }

  render(){
    return(
      <div>
        <h3>프로필입니다</h3>
        <p>저는 { this.state.name } 입니다.</p>
        <button onClick={ () => { this.changeName() } }>버튼</button>
      </div>
    )
  }
}