React - 버튼에 기능개발 & 리액트 state 변경하기

좋아요 버튼 만들기

버튼을 누르면 좋아요 개수가 1개씩 증가하는 기능 만들어보기

<h4> { 글제목[0] } <span>👍</span> 0 </h4>

-> html 레이아웃 먼저 만들기

자주 바뀔 것 같은 html 내용은 state로 저장했다가 데이터바인딩을 해야한다
따라서 좋아요 갯수를 state로 만들어보면

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

onClick 사용법

어떤 html을 클릭 시 원하는 코드 실행하는 방법

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

-> 일반 자바스크립트

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

-> JSX

다른점
1. Click이 대문자
2. {} 중괄호 사용
3. 그냥 코드가 아니라 함수를 넣어야 잘 동작한다

onClick={} 안에 함수

onClick={}안에는 어디서 만든 함수명을 적거나 혹은 함수 하나를 바로 만들어서 집어넣어주면 된다

function App(){
  
  function 함수에요(){
    console.log(1)
  }
  return (
     <div onClick={함수에요}> 안녕하세요 </div>
  )
}

-> div 클릭 시 1 이 출력


함수를 그 자리에서 바로 만들 수도 있다

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

state 변경하는 법⭐⭐⭐

좋아요 버튼을 누르면 따봉이라는 state를 +1 하는 코드 짜보기

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

-> 이렇게 하면 작동 XX

변수라면 변수 = 변수 + 1 해줘도 되지만 state이기 때문에 state변경함수를 사용해야한다

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

state 만들 때 2개까지 작명 할 수 있는데 2번째가 바로 state 변경을 도와주는 함수이다

사용방법

따봉변경(새로운state) 

ex)
따봉변경(1) 이라고 하면 따봉이라는 state가 1로 변경
따봉변경(100) 이라고 하면 따봉이라는 state가 100으로 변경

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

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

-> 👍를 누를 때마다 1씩 증가한다