화살표함수를 안쓰고 함수명()
을 하면 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>
)
}
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>
);
}
}