React_useState 와 onclick을 활용한 카운터 만들기

 

#useState

 

16.8이후부터 useState라는 함수를 사용하여 함수형 컴포넌트에서도 state를 사용할 수 있게 되었습니다. 이과정에서 Hooks이라는 것을 사용하는데 이번 블로깅은 useState와 onclick을 활용해서 카운터를 만들어 보겠습니다. 

 

우선 이함수를 사용하기전에 배열의 비구조 할당에 대한 개념이 잡혀야 useState함수를 좀더 익숙하게 사용할 수 있습니다.

---

// 일반적일 배열 할당
const array = [1, 2];
const one = array[0];
const two = array[1];
 
// 배열 비구조화 할당
const array = [1, 2];
const [one, two] = array;
 

//Joycoding 컴포넌트 (카운터)
 
import React,{ useState } from "react";
 
function Joycoding() {
 
const [num, setNum] = useState(0);
 
const upNum = () => {
  setNum(prevnumber => prevnumber + 1) // 최신화 함수 관리시 사용
  //setNum(num + 1)  //이렇게 써도 상관없습니다.
}
 
const downNum = () => {
  setNum(num - 1)
} 
 
  return (
    <div>
      <h1>{num}</h1>
      <button onClick={upNum}>+1</button>
      <button onClick={downNum}>-1</button>
    </div>
  );
}
 
export default Joycoding;

//App.js
 
import React from "react";
import Joycoding from './Joycoding'
 
 
function App() {
  return (
    <div>
     <Joycoding/>
    </div>
  );
}
 
export default App;
 

 

끝으로 작성한 카운터 컴포넌트(Joycoding)를 App.js 렌더링 값에 넣어 주고 결과 값을 확인 하면 아래와 같은 화면이 출력 됩니다.

 

 

버튼을 이리저리 눌러보세요!! 마법같은 일이!