[React] State로 버튼기능 생성

확실히 블로그에 기록을 남기면서 공부를 하다보니

훨씬 기억에 오래남는다.

​

이번엔 State사용해서 눌렀을 때 바로 숫자가 변하는 버튼을 만들어보자

​

 

let [like, btn_change] = useState(0) 
<button onClick={() => { btn_change(like + 1)}}>좋아요!</button>
<h2>{like}</h2>

 

like라는 state에 0을 할당하고

button을 만들어 onClick속성을 함수로 넣어주었다.

 

​

여기서

let [like, btn_change] = useState(0)

 

두번째 인자(btn_change)는

첫번째 인자를 변화시킬 수 있는 함수를 뜻한다.

 

 

<button onClick={() => { btn_change(like + 1)}}>좋아요!</button>

 

onclick속성안에 btn_change(like+1)을 넣어주면

버튼을 클릭할때마다

 

<h2>{like}</h2>

 

제일 위의 state 선언문에서 0으로 할당된

like state가 1씩 증가한다

​

​

이렇게 새로고침없이 재렌더링이 된다는 점

react state의 강력한 무기이다.