[React] state, onClick

1. useState 임포트

import { useState } from 'react'

 

 

2. state 선언

 

 - title : state를 사용할 때 쓸 변수명

 - setTitle : state의 상태를 바꿀 때 사용

 - JS의 destructuring 문법을 활용함

 - 위 사진처럼 코드가 짜여져 있을 때, destructuring에 의해 a에 1, b에 3이 저장

 

 

3. state를 사용하는 이유

 - state에 변동사항이 발생하면 html이 자동으로 재 렌더링해 갱신된 값이 화면에 출력

 - 자주 변하는 값을 state에 저장하면 용이함

 - vue의 ref() 같은 느낌이 있다.

 

 

4. state 변경하는 방법

 - destructuring으로 꺼낸 state 변경 함수를 사용

 

 

5. 버튼 눌렀을 때 함수를 작동시키는 onClick

 - html 요소에 onClick={함수} 형태로 코드 작성

 

 - Like가 적혀져있는 span태그를 누를때 마다 state 변경 함수인 setLike가 동작

 - setLike는 현재 like state에 담겨져 있는 값에서 1을 더한 값으로 like를 갱신