state 문법

useState라고만 쳐도 위에

import { useState } from "react";

 

라는게 생긴다

 

사용법은 let [a,b] = useState('이것은 state입니다')

a = '이것은 state입니다' 가 된다

 

js에서 배웠던 destructing이랑 똑같은거임 ( let [a,b] = [1,2] )

a에는 ()안에 있는게 저장되는거고 , b에는 함수가 저장됨

 

왜씀? 

만약에 그냥 let a = 1 이렇게 해서 밑에서 쓰고있었는데 a값이 2로 바뀜 - 그러면 새로고침 하기 전까지는 페이지에는 a = 1값으로 사용됨

근데 useState를 쓰면 변동시 자동으로 html에 반영이 됨 - 자동 재렌더링 됨

나중에 서버에서 데이터 받아와서 할때가 있을텐데 그때 유용

당연히 뭔가 변동될때마다 바로바로 바꿔줘야할 데이터에 쓰는게 좋음

state 이용해서 버튼기능 활성화하기

react의 경우 굳이 addEventListener('click') 안해줘도 span onClick = {함수} 해주면 버튼기능이 구현된다(일반 html도 가능하긴함)

유튜브 좋아요 누르는거같이 누르면 바로바로 반영되게 코드를 짜보면 

let [좋아요,좋아요변경] = useState(0);

<span onClick={countLike}>👍</span>

{좋아요} 

 

state쓰는거 헷갈릴필요 없이 그냥 let 좋아요 = 0으로 하는데 그때그때 바뀔 수 있게 useState랑 바꿀때 쓸 수 있는 함수 이름만 넣어준다고 생각하면됨

그냥 let 좋아요 = 0을 바꾸려면 좋아요 = 좋아요 + 1 하면 되겠지만 이건 state라 그렇게 바꾸면 안됨 - 저 변경함수 이용해서

 

const countLike = () => {

좋아요변경(좋아요 +1) 

}  이런식으로 변경함수(새롭게 변경할값) 해주면 됨

reset버튼 만들고 싶다 그러면 변경함수(0) 해주면 됨

 

이렇게 하면 굳이 innerHTML 다시 설정해주고 이럴필요 없음