[⚛️] 카운터 앱 만들어보기

useState와 이벤트 핸들러를 이용한 카운터 앱 만들어보기 실습

 

구현해야 할 기능

 

• App.jsx에 코드를 작성한다.
• + 1 버튼을 누를 때마다 숫자가 +1 증가한다.
• - 1  버튼을 누를 때마다 숫자가 - 1 감소한다.

 

💡버튼을 누르면 State가 변경되면서 화면이 리렌더링 되는 형식

 

 

 

기능 구현하기

 

📍기본 형식

App.jsx의 기본 형식을 준비한다.

* rafce 입력

두 개의 확장 프로그램을 설치하여 단축키를 사용할 수 있다.

import React from "react";

const App = () => {
return <div>App</div>
}

export default App;

 

 

📍구현 단계

 

1. 초기값이 0인 number라는 State 만들기

* useState를 import 하기

import React, { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return <div>App</div>;
};

export default App;

 

 

2. number는 state로, JavaScript의 변수이다.

* 중괄호{ }를 이용해서 표현하기 (객체 형태)

  return <div>{number}</div>;

초기값 0이 출력된다.

 

 

3. 버튼 2개를 생성하기

* <div>로 묶어 아래로 정렬한다. 이때 기존 형식에 따라 return () -> 괄호로 감싼다.

👇🏻

  return (
    <div>
      <div>{number}</div>
      <div>
        <button>-1</button>
        <button>+1</button>
      </div>
    </div>
  );
};

 

 

 

4. <div> 에 style 지정하기

* style도 JavaScript 문법이니 { }로 감싸준다. (객체 형태)

return (
    <div style={{
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
    }}>
    );

 

 

 

 

5. onClick 이벤트 함수를 만든다.

* 버튼을 누르면 숫자가 변동되어야 한다. 함수 생성 위치는 App 함수 바로 아래

* number를 직접 바꾸는 것이 아닌, setNumber를 이용해서 바꿔야만 리액트가 인식할 수 있음

const App = () => {
  const onMinusBottonClick = () => {
    setNumber(number - 1);
  };

  const onPlusBottonClick = () => {
    setNumber(number + 1);
  };

  const [number, setNumber] = useState(0);
  return (

 

 

 

6. 함수들을 onClick으로 연결시키기

<div>{number}</div>
      <div>
        <button onClick={onMinusBottonClick}>-1</button>
        <button onClick={onPlusBottonClick}>+1</button>
      </div>
    </div>

 

 

 

 

최종 로직

import React, { useState } from "react";

const App = () => {
  const onMinusBottonClick = () => {
    setNumber(number - 1);
  };

  const onPlusBottonClick = () => {
    setNumber(number + 1);
  };

  const [number, setNumber] = useState(0);
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <div>{number}</div>
      <div>
        <button onClick={onMinusBottonClick}>-1</button>
        <button onClick={onPlusBottonClick}>+1</button>
      </div>
    </div>
  );
};

export default App;