class사용한 예전 리액트 문법

class Profile extends React.Component {
  constructor() {
 super();
 this.state = { name: "Kim", age: 30 };
    // state는 이런식으로 작성
  }
  render() {
    return <div>프로필</div>;
    // 여기에 html 요소 작성
  }
}

그리고 원하는 위치에 <Profile/> 을 넣어준다.

초간단하게 훑기

class: 변수/함수 보관하는 덩어리
extends: 오른쪽에 위치한 애의 성질을 물려받겠다~
constructor: class의 변수/초기값을 저장할 때 사용

class Profile extends React.Component {
  constructor() {
    super();
    this.state = { name: "Kim", age: 30 };
  }
  render() {
    return (
      <div>
        <h3>프로필</h3>
        <p>저는 {this.state.name} 입니다</p>
// state 꺼내 쓰려면 위와 같이 
// { this.state.★★ } 이런 식으로 작성해주어야 한다.
      </div>
    );
  }
}

---

버튼을 누르면 state가 변경되게 하기

배웠던 건, state랑 함께 만든 state변경함수를 사용했다.

예전에는

<button onClick={() => {
            this.setState({ name: "Park" });
          }} >버튼</button>

이렇게 만들었다.

this.setState(  {state명: 바꿀 내용} )

앞서 배운 useState() 는 기존의 state를 아예 대체해버리는 함수
But
setState() 는 '변경할 state'만 넣어주는 것이고
기존의 state를 건들진 않는다.

만약 onClick 함수가 너무 길어 따로 만들어 빼고싶다면

class Profile extends React.Component {
  constructor() {
    super();
    this.state = { name: "Kim", age: 30 };
  }
  // 여기에 함수 작성
  changeName(){
  	this.setState({name: "Park"})
  }
  // 화살표함수로 할땐
  // changeName = () => {어쩌구저쩌구}
  
  
  render() {
    return (
      <div>
        <h3>프로필</h3>
        <p>저는 {this.state.name} 입니다</p>
        <button
          onClick={ this.changeName.bind(this) }
// onClick 함수에 함수를 넣어주면 된다.
// 중요한 건! 앞에 꼭 this를 넣어주어야 한다는 것
    // bind함수 사용하기 싫다면 위에 changeName함수를 화살표함수로 해주면 된다.
          
        >
          버튼
        </button>
      </div>
    );
  }
}