#3 State를 이용한 숫자 카운터 만들기

안녕하세요! 오늘의 리액트 주제 글은 useState라는 상태관리 Hooks를 이용한 간단한 카운터 만들기를 해보려고 합니다. 😊 리액트 Hooks를 주제로 적은 첫번째 글이 될거같습니다.

1. 프로젝트 UI 만들기

지난 시간에 components라는 폴더를 만들고 작업을 진행해왔었는데요, 이번에도 똑같이 components 폴더에 Counter.js라는 폴더를 만들어줍시다.

저는 지금 컴퓨터로 글을 적고있다보니, CodeSandBox 사이트를 활용하여 폴더를 만들었습니다.

CodeSandBox 사이트: http://codesandbox.io

해당 사진처럼 Counter.js라는 파일을 만드셨으면, 이제 Counter.js로 가서 코드를 작성해줍시다. 👨‍👨‍👧‍👧 코드는 다음과 같이 작성해주시면 됩니다.

import React from "react";

const Counter = () => {
  return (
    <div>
      <h1>1</h1>
      <button>+1</button>&nbsp;
      <button>-1</button>
    </div>
  );
};

export default Counter;

Counter.js 파일의 코드를 다 작성하셨으면, App.js로 가서 Counter 컴포넌트를 렌더링 시켜줍시다! 그런다음, yarn start를 입력하여 실행을 시켜줍시다 🙃

프로젝트를 실행시키면, 다음과 같은 화면을 보실 수 있습니다. 이제 이 상태에서, +1 버튼을 누르면 숫자가 1씩 증가되고, -1 버튼을 누르면 숫자가 -1씩 증가되도록 하려고 합니다. 그러기 위해서 저희는 상태관리 Hooks인 useState를 사용하여 구현해보도록 하겠습니다 ✔✔

2. useState 선언 및 사용하기

먼저, useState Hooks를 사용할 때, React.useState라고 쓰는 번거로움을 없애기 위해서, 다음과 같이 import 코드를 추가해줍시다!

			import React, { useState } from "react";

그리고 상태가 바뀌어질 getter변수와, 상태를 바꾸도록 할 수 있는 setter함수, 그리고 getter변수의 초기값을 포함하여 useState를 선언해주셔야 합니다. 다음과 같이 코드를 작성해주세요 :)

			const [number, setNumber] = useState(1);

코드를 설명해드리자면, number는 상태관리의 현재 상태를 가져올 수 있는 getter 변수이고, setNumber는 number 변수의 상태를 관리해주는 setter함수 입니다.

useState()안에 적힌 숫자는 getter변수 number의 초기값을 지정해주는 값입니다. 초기값은 문자열이 될 수 있고, 배열이나 객체가 될 수도 있습니다. 각각의 상황에 맞게 선언을 해주시면 됩니다 :) 현재 number의 초기값은 정수형 숫자 1입니다.

앞서 말했던 증가, 감소를 시키려면 setter변수 setNumber를 이용하여 할 수 있습니다. 그러기 위해서 저는 증가시키는 함수, 감소시키는 함수 두가지를 만들어 버튼의 이벤트를 등록시켜줄것 입니다. 😎

🎆 다음과 같이 코드를 작성하여 함수를 만들어 주시고, 버튼의 클릭 이벤트를 등록하겠습니다 🎆

import React, { useState } from "react";

const Counter = () => {
  const [number, setNumber] = useState(1);

  const increaseNumber = () => { // number의 값을 증가시키는 함수
    setNumber(number + 1);
    // setNumber(prevNumber => prevNumber + 1);
    // 다음과 같이 현재 number의 값을 불러와서 증가 시켜주는 방법도 있습니다 :)
  };

  const decreaseNumber = () => { // number의 값을 감소시키는 함수
    setNumber(number - 1);
    // setNumber(prevNumber => prevNumber - 1);
    // 다음과 같이 현재 number의 값을 불러와서 감소 시켜주는 방법도 있습니다 :)
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={increaseNumber}>+1</button>&nbsp;
      <button onClick={decreaseNumber}>-1</button>
    </div>
  );
};

export default Counter;

코드를 설명해드리자면 먼저 증가시키는 함수와 감소시키는 함수 두개를 만든다음, 각각의 기능에 맞게 setNumber 라는 setter함수를 이용하여 현재 number의 값에서 각각 +1, -1을 해주었습니다.
number가 현재 1이니, number + 1을 하면 2, 3, 4... 형식으로 늘어나고, 그 상태에서 -1을 누르면 4, 3, 2... 형식으로 계속해서 줄어들 것입니다.

3. 함수 이벤트 처리하기

그리고, 버튼의 onClick 이벤트를 걸어주실때, 주의해야 할 점이 있는데요. 함수의 매개변수를 전달하지 않는 형태의 함수를 호출하는 형태에서는 ( )를 빼주셔야 합니다.

<button onClick={increaseNumber()}>+1</button>
<button onClick={decreaseNumber()}>-1</button>

만약 다음과 같이 ( )를 넣어서 호출을할시, 클릭을 하지 않아도 바로 함수가 실행이 되어버리는 문제점이 생기게 됩니다. 그러므로 꼭!!! 매개변수를 넘기지 않는 형식의 함수라면, ( )를 빼주시고, 실행을 해야 합니다. 🙂🙂

나중에 다른 여러가지 실습을 해보면서 useState의 여러 종류들을 알아보고 하는 시간을 가지면서 잘 이해하시면 좋을 것 같습니다. :)

4. 포스트를 마치며

이번에 처음으로 리액트 Hooks에 관한 글을 적어보았는데요, 이해가 잘 되셨으면 좋겠습니다. 앞으로도 더욱 더 좋은 퀄리티의 글로 찾아 뵙겠습니다 :) 긴 글 읽어주셔서 감사합니다! 😍🥰🤩🙆‍♂️