클릭 이벤트, state변경

fe.syhan·2023년 11월 1일
0

React basic

목록 보기
4/17
post-thumbnail

onClick


HTML

<div onclick="실행할 자바스크립트">

JSX

<div onClick={ 실행할 함수 }>
  1. Click이 대문자
  2. { } 중괄화 사용
  3. 그냥 코드가 아니라 함수를 넣어야 동작한다
function App() {

	function test() {
	    console.log("테스트");
	  }
	
	return(
		<div onClick={test}>테스트용함수</div>
	);
}

<div> 를 클릭 시 함수 안에 있는 코드가 실행 됩니다.

<div onClick={ function(){ 실행할코드 } }> 
<div onClick={ () => { 실행할코드 } }>

재사용하지 않을 함수면 이렇게 작성도 가능합니다.

state 변경하는 법


let [ like, likeChange ] = useState(0);

state 만들 때 두번째 변수에 담긴게 state 변경을 도와주는 함수입니다.

사용법은,

likeChange(새로운state)

likeChange(1) 이라고 사용하면 like 라는 state 가 1로 변경됩니다.

likeChange(100) 이라고 사용하면 like 라는 state 가 100으로 변경됩니다.

0개의 댓글