React 기초 4강 - 리액트에서 버튼에 이벤트 리스너 (핸들러) 적용하는 법

코딩애플 - 리액트 기초 : 블로그 프로젝트 만들기 기반으로 스터디하며 작성하였습니다.

 

이전글

 

1. 터미널에 뜨는 warning 없애는 방법

- eslint가 잡아주는 문법 체크사항

- eslint란, 잘못된 코딩 관습을 바로 잡아주는 작업

terminal화면

warning을 보고 싶지 않다면, /* eslint-disable */ 작성하기

좌) 작성화면 / 우)터미널 화면

 

2. 좋아요 버튼을 만들어보자👍

onClick={클릭될 때 실행할 함수}
onClick={()=>{실행할 내용}}

 

3. 따봉 누를 때마다 1 증가 시키기

따봉은 자주 변하는 숫자이므로 useState로 만들어야 한다.

따봉 useState 만들기

state는 그냥 변경이 안된다. 하단 예시로는 사용이 어렵다.

 

👉 state 변경 방법 

따봉이랑 같이 만들었던 따봉변경() 함수

따봉변경(대체할 데이터)

따봉을 누르면 숫자가 올라간다

 

 [따봉, 따봉변경]  = [state, state변경함수] 

 

💡 state 변경함수로 변경해야 재렌더링이 잘 일어납니다.