함수 컴포넌트

• this 쓸 일이 없다
• 코드가 짧다

Q. onClick에서 왜 화살표 함수를 쓰는가?

화살표함수를 안쓰고 함수명()을 하면 onClick과 상관없이 바로 실행되기 때문이다.
따라서 밑에 둘 중 하나만 쓰면 된다.

onClick={()=>{ 함수명() }}

onClick={함수명}

// 화살표함수() or 그냥 함수명만 사용해야한다.
export default function App(){
  //liked: data,   setLiked: data 변경하는 함수
  const [liked, setLiked] = React.useState(false); 
  if(liked) {return "Like this yo";}
  
  function Likes(){
    console.log("Like you");
  }
  function Hates(){
    console.log("Hates you");
  }
  return (
  	<div>
      <button onClick={() => { setLikes(true); }}>Like This</button>
      <button onClick={() => { Likes() }}>Like</button>
      <button onClick={Hates}>Hate</button>
    </div>
  )
}

클래스 컴포넌트

• this 사용의 어려움 때문에 클래스를 잘 안 쓰게 된다

class LikeBtn extends React.Component {
  state = {liked: false};  // constuctor() 안쓸수 있는 방법

  onClickBtn = () => {    // 화살표 함수로 bind를 대신함
    this.setState({liked: true});
  }
  
  render() {
    if (this.state.liked) {
      return "liked this";
    }
    
    return (
       <button onClick={this.onClickBtn}>
         Like
       </button>
    );
  }

}