React state변경

onClick 사용법

html에서 썼던거랑 조금 다름

<div onclick="실행할 자바스크립트~~~"> // 이게 html
<div onClick={실행할함수}> // 이게 react

1. Click이 대문자인거

2. {} 중괄호 사용하는거

3. 그냥 코드가 아니라 함수를 넣어야 잘 동작한다는거

기억하자

onClick={ } 안에 함수를 적는게 뭔소리임

function App(){
  
  function 함수임(){
    console.log(1)
  }  // 이 함수를
  
  return (
     <div onClick={함수임}> 안녕하세요 </div> 
	// 여기 onClick{}안에 집어넣은거임
  )
}

//함수 따로 만드는게 귀찮으면 onClick 안에 바로 집어넣으면 됨
<div onClick={ function(){ 실행할코드 } }> 
<div onClick={ () => { 실행할코드 } }>

---

(매우중요) state 변경하는 법

state는 state변경함수를 써서 state를 변경해야함 이거 아니면 큰일남

let [ 따봉, 따봉변경 ] = useState(0); 

state 만들때 2개 까지 작명 가능이었는데 두번째 작명한게 state 변경함수임 이걸 써야 변경가능하다는것!

사용법은

따봉변경(새로운state) 

왜냐면 state 변경함수는 ( ) 안에 넣은걸로 state를 갈아치워주는 함수기 때문임

만약 ()안에 1 넣으면 따봉이라는 state가 1로 변경되겠죠

좋아요를 눌렀을 때 따봉이라는 state를 1 증가하려면

function App(){
  
  let [ 따봉, 따봉변경 ] = useState(0);
  return (
      <h4> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉 + 1) } } >👍</span> { 따봉 }</h4>
  )
}

따봉이라는 기존 state에 1을 더한 값을 따봉변경 함수에 집어넣었음

이러면 버튼 누를때마다 1씩 증가함 ㄷ ㄷ

---

• 빡대가리식 정리

1. 클릭시 뭔가 실행하고 싶으면 onClick={함수} 이렇게 이벤트 핸들러를 달아서 사용함

2. state를 변경하려면 state 변경함수를 무조건 이용해야됨

3. state 변경함수는() 안에 입력한걸로 기존 state 갈아치움