옛날 React문법

이미 만들어진 react를 다루게 되는 일이 있을테니 옛 react문법을 알아보자.

function App(){
  return (
    <div>
      HTML 잔뜩있는 곳
      <Profile />
    </div>
  )
}

class Profile extends React.Component {
  constructor(){
    super();
    this.state = { name : 'Kim'}; //state는 이런 식으로, this를 붙여 만들 수 있다.
  }
	
  changeName(){
    this.setState( {name : 'Park'} )
  } //함수를 만드려면 위처럼 만들고, 사용할 때 this.함수명 으로 사용한다.
  //만약 에러나면 this.함수명.bind(this)로 쓰기 
  //아니면, 함수를changeName = () => {}로 만들기 이러면 상위의 this값을 사용

  render(){
    return (
      <div>프로필영역입니다</div>
      <p>저는 { this.state.name } 입니다.</p> //state를 사용하려면 this.name를 붙여 사용한다.
      <button onClick={ ()=>{ this.setState( {name : 'Park'} ) } 또는 this.changeName }> 버튼 </button>
      //state를 변경할 땐 변경함수가 아니라 this.setState에 바꿀 state를 적어준다.
    )
  }
}

위와 같이 쓰며, 상당히 길게 써야한다.

class 는 변수/함수를 보관하는 덩어리이고,

extends 는 오른쪽에 있는 성질을 물려받겠다는 뜻이다.

constructor 는 class의 변수/초기값을 저장할 때 사용한다.