버튼 기능 개발, state 변경

좋아요 버튼 만들기

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

좋아요 수 state 만들기

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

onClick

• 버튼을 누르면 1씩 증가하게 만들기
• 어떤 html을 클릭 시 원하는 코드가 나오는지 알아야됨
• 일반 자바 스크립트

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

• JSX 함수

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

• onClick 안에 함수를 적어줘야됨. 위에 하나의 함수를 만들어서 사용해도 되지만 이렇게 하는게 더 편리하다.

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

state 변경하는 법

• 이렇게 해주면 안됨. 변수가 아니라 state이기 때문에 재렌더링이 되지 않음

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

• state 만들 때 첫번째는 직관적인 변수 이름 두번째에 변수를 변경을 도와주는 함수로 작명하여 사용

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

• 사용법은 두번째 함수 안에 새로운 state를 적어주면 됨.
• 따봉변경(1) 이라고 사용하면 따봉이라는 state가 1로 변경
• 따봉변경(100) 이라고 사용하면 따봉이라는 state가 100으로 변경
• 따봉변경(따봉=따봉+1) 이런 거 안됨.

따봉변경(새로운state)

• 이제 마지막으로 따봉을 눌렀을 때 숫자가 하나씩 증가되려면 따봉이라는 기존 state에 1을 더한 값을 따봉변경 함수에 넣어주면 됨.

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