[React] useState() 함수

useState() 함수 이용하여 좋아요(👍) 버튼 만들기

 

아래 코드에서 좋아요(👍)버튼을 누르면 숫자가 1씩 증가하는 코드를 구현하겠습니다.

<div className='App'>
	<div className='list'>
		<h3> 
			남자 코트 추천
			<span>👍</span> 0
		</h3>
		<p> 2월 17일 발행 </p>
		<hr />
	</div>
</div>

---

useState() 구조

let [state, setState] = useState(initiailState);

• useState()는 배열로 반환합니다.
• 배열의 첫번째 요소 (state) : 상태값 저장 변수
• 배열의 두번째 요소 (setState) : 상태값 갱신 함수
• initiailState : state 초기값

---

• App.js에서 맨 윗줄에 useState를 import 해줍니다.

import React, { useState } from 'react';

 

 

• useState() 함수를 이용하여 like 변수는 0으로 초기값을 잡습니다. (setLike()는 like 변수 값을 갱신하기 위한 함수입니다.)

let [like, setLike] = useState(0);

 

 

• JSX 문법에선 변수를 { 변수명 } 이라고 선언해야 합니다.
• onClick 안에 Arrow Function을 작성하였고 like 변수값을 갱신하기 위한 setLike() 안에 'like + 1'을 선언하였습니다.

<span onClick={ () => { setLike(like + 1) } }>👍</span> { like }

---

전체 코드

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

function App() {

  // useState() 함수
  let [like, setLike] = useState(0);

  return (
    <div className='App'>
      <div className='list'>
         <h3> 
            남자 코트 추천
           <span onClick={ () => { setLike(like + 1) } }>👍</span> { like }
         </h3>
         <p> 2월 17일 발행 </p>
         <hr />
       </div>
    </div>
  );
}

 

위 이미지처럼 좋아요 버튼을 누를때마다 숫자가 갱신되는 것을 확인할 수 있습니다.