리액트 state 변경하는 법

좋아요 버튼을 누르면 옆에 있는 수가 +1 되게 만들어볼거예요

 

좋아요 버튼 만들기

function App(){

let [따봉] = useState(0);
return (
 <h4>{ 글제목[0] }<span>👍🏻</span>{따봉}</h4>
)
}

useState()쓰고 왼쪽에 let [] 으로 작명만 잘하면 됩니다

원래  let []  안에 변수를 두개 쓰는데, 일단 1개만 할게요

 

 

onClick 사용법

우리가 원하는 건 버튼이 그대로 있는 것이 아니라 버튼을 누를때, state 가 1씩 증가하는 기능입니다

먼저 html 파일에서 onclick 사용법은 ?

<div onclcik ="실행할 자바스크립트~~">

JSX에서는 이렇게 만듭니다. {}를 써서 넣어줬어요

<div onClick ={실행할 함수}>

<div onClick ={ function(){실행할코드} }>
<div onClick ={ ()=>{실행할코드} }>

근데 함수만드는게 귀찮으면 함수를 그 자리에 직접만들어버려도 됩니다.

함수를 재사용할게 아니라면 굳이 작명을 안해도 됩니다

 

 

 

 

state 변경하는 법(변수 재할당과 다름)

좋아요 버튼 눌렀을 때 +1이 되길 원한다면

기존에 변수에서는 변수 = 변수 +1 로 재할당을 해줍니다

하지만, state 변경은 변수처럼 하지 않습니다.

state는 state변경함수를 써서 state를 변경해야 합니다

 

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

state 만들때 2개까지 작명할 수 있는데,

두번째 자리에 있는 건 state 변경함수 입니다. 이걸써야 state 변경이 가능함!

 

사용법은 이렇게

따봉변경(새로운state)

state 변경함수는 ()안에 넣은걸로 state를 갈아 치워줍니다

따봉변경(따봉= 따봉+1) // 절대안된다!!

깔끔하게 새로운 state를 ()안에 넣기!~~~~~~

 

 

<완성코드>

/*eslint-disable*/

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {

  let post ='강남 우동 맛집';
  let [글제목,b] = useState(['여자코트추천','강남우동맛집','파이썬독학']);
  let [따봉,따봉변경] = useState(0);
  

  return (
    <div className = 'App'>
    <div className ="black-nav">
      <h4>ReactBlog</h4>
    </div>
    <div className='list'>
    <h4>{글제목[0]}<span onClick={()=>{따봉변경(따봉+1)}}>👍🏻</span> {따봉} </h4> 
    <p>2월 17일 발행</p>
    </div>


    <div className='list'>
    <h4>{글제목[1]}</h4> 
    <p>2월 17일 발행</p>
    </div>
    <div className='list'>
    <h4>{글제목[2]}</h4> 
    <p>2월 17일 발행</p>
    </div>
    </div>
  );
}

export default App;

 

 

 

배운내용정리

 

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

2. state를 변경하려면 state변경함수를 사용해서 ()안에 새로운 state값  넣기