[React]클래스형 컴포넌트

[React]클래스형 컴포넌트

컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트가 있다. 리액트에서는 최근에는 함수형 컴포넌트를 자주사용하지만 클래스형 컴포넌트를 사용한 예전 방식에 대응하기 위해서 클래스형 컴포넌트도 사용할 수 있도록 하자.

클래스형 컴포넌트 사용법

컴포넌트 만드는 방법

1.클래스형 컴포넌트를 선언한다.

class Profile extends React.Component{
  constructor(){
    super();
  }
  render(){
    return(
      <div>프로필입니다.</div>
    )
  }
}

2.사용한 부분에서 컴포넌트를 불러온다.

    <Profile/>

 

state 사용 및 변경하는 방법

1.state 사용하는 방법

this.state.키값

2.state 변경하는 방법

this.setState( {키값:변경할값})

App.js

class Profile extends React.Component{
  constructor(){
    super();
    this.state = { name : "Choi", age : 30} // 1.state 생성
  }
  render(){
    return(
      <div>
        <h3>프로필입니다.</h3>
        <p>저는 { this.state.name} 입니다.</p>
        <button onClick={ ()=>{ this.setState( {name:"Park"} ) } }>버튼</button> // 2.state 변경
      </div>
    )
  }
}

 

함수 사용하는 방법

1.함수 선언

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

2.함수 사용

<button onClick={ ()=>{ this.changeName() } }>버튼</button>

App.js

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

  // 1.함수 선언
  changeName(){
    this.setState({name:"Park"})
  }

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