[React] onClick

bomi__unni·2022년 5월 20일
0

React

목록 보기
4/8

ERROR는 에러라 중요
WARNING은 무시 가능

Warning 메시지 없애는 방법(lint 끄기)

/*eslint-disable*/

useState 만들기

let [따봉] = useState(0); 
> state에 0을 넣을거임

사용하고 싶은 곳에 -> { 따봉 } 넣기

함수 만드는 문법

  1. function 함수() {}
function 함수() {
	console.log(1)
}
  1. 태그 내부에 함수 그냥 넣기
<h4>{ 글제목[0] }<span onClick = { function(){console.log(1) } }>👍</span> { 따봉 } </h4>
  1. 태그 내부에 arrow function 넣기 ( ) => { }
<h4>{ 글제목[0] }<span onClick = { () => { console.log(1) } }>👍</span> { 따봉 } </h4>

onClick

onClick={}안엔 함수이름을 넣어야 함

onClick = { 함수명 }

state 변경하는법

등호로 변경금지 !! 반드시 state 변경함수를 써야한다.
state 만들 때 작명 2개까지 할 수 있는데, 그 두번째 자리가 바로 state 변경용 함수다!!! 이걸써야 html 재렌더링도 잘된다.

state변경함수(새로운state)
<h4>{ 글제목[0] }<span onClick = { () => { 따봉변경(따봉+1) } }>👍</span> { 따봉 } </h4>

이렇게 쓰면 버튼을 클릭할 때마다 숫자가 하나씩 증가한다!!

0개의 댓글