React로 간단한 계산기 만들기-JS 튜토리얼-php.cn

React로 간단한 계산기 만들기

王林

풀어 주다： 2024-09-04 07:03:02

원래의

969명이 탐색했습니다.

Building a Simple Calculator with React

소개

이 튜토리얼에서는 React를 사용하여 간단하고 기능적인 계산기를 만드는 과정을 안내합니다. 이 프로젝트는 React를 직접 경험하고 React 애플리케이션에서 상태를 관리하고 이벤트를 처리하는 방법을 이해하려는 초보자에게 훌륭한 출발점입니다.

프로젝트 개요

이 계산기 프로젝트를 통해 사용자는 덧셈, 뺄셈, 곱셈, 나눗셈과 같은 기본적인 산술 연산을 수행할 수 있습니다. 계산기는 세련되고 사용자 친화적인 인터페이스를 갖추고 있으며 입력 내용 지우기, 마지막으로 입력한 값 삭제, 결과 계산 등 모든 필수 작업을 처리합니다.

특징

기본 산술 연산: 덧셈, 뺄셈, 곱셈, 나눗셈을 지원합니다.
지우기(AC) 및 삭제(DEL) 기능: 모든 입력을 쉽게 지우거나 마지막에 입력한 숫자를 삭제합니다.
반응형 디자인: 직관적인 버튼 레이아웃으로 다양한 화면 크기에서 잘 작동합니다.
오류 처리: 잘못된 작업이 수행되면 오류 메시지를 표시합니다.

사용된 기술

React: 사용자 인터페이스 구축용.
CSS: 애플리케이션 스타일을 지정하고 반응형 디자인을 보장합니다.

프로젝트 구조

프로젝트의 구성은 다음과 같습니다.

├── public
├── src
│   ├── components
│   │   └── Calculator.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

로그인 후 복사

주요 구성 요소

Calculator.jsx: 상태 관리 및 이벤트 처리를 포함한 계산기의 기본 논리가 포함되어 있습니다.
App.jsx: 계산기 구성요소를 래핑하고 애플리케이션의 전체 레이아웃을 처리합니다.
App.css: 계산기 구성요소의 스타일이 포함되어 있습니다.

코드 설명

계산기 구성요소

계산기 구성요소는 useState 후크를 사용하여 계산기의 입력 및 결과 상태를 관리합니다. 여기에는 버튼 클릭을 처리하고 그에 따라 상태를 업데이트하는 handlerClick 함수가 포함되어 있습니다. 계산 결과 함수는 JavaScript의 eval 함수를 사용하여 입력을 평가하고 결과를 업데이트합니다.

import  { useState } from "react";

const Calculator = () => {
  const [input, setInput] = useState("");
  const [result, setResult] = useState("");

  const handleClick = (value) => {
    if (value === "AC") {
      setInput("");
      setResult("");
    } else if (value === "DEL") {
      setInput(input.slice(0, -1));
    } else if (value === "=") {
        setResult("")
      calculateResult();
    } else {
      setInput(input + value);
    }
  };

  const calculateResult = () => {
    try {
      setInput(eval(input));
    } catch (error) {
      setResult("Enter Valid Operation");
    }
  };

  return (
    <div className="calculator">
      <div className="output-box">
        <h1>{input}</h1>
        <h2>{result}</h2>
      </div>
      <div className="buttons">
        <div className="row-1">
          <button onClick={() => handleClick("AC")}>
            <p>AC</p>
          </button>
          <button onClick={() => handleClick("DEL")}>
            <p>DEL</p>
          </button>
          <button onClick={() => handleClick("%")}>
            <p>%</p>
          </button>
          <button onClick={() => handleClick("/")}>
            <p>÷</p>
          </button>
        </div>
        <div className="row-2">
          <button onClick={() => handleClick("7")}>
            <p>7</p>
          </button>
          <button onClick={() => handleClick("8")}>
            <p>8</p>
          </button>
          <button onClick={() => handleClick("9")}>
            <p>9</p>
          </button>
          <button onClick={() => handleClick("*")}>
            <p>X</p>
          </button>
        </div>
        <div className="row-3">
          <button onClick={() => handleClick("4")}>
            <p>4</p>
          </button>
          <button onClick={() => handleClick("5")}>
            <p>5</p>
          </button>
          <button onClick={() => handleClick("6")}>
            <p>6</p>
          </button>
          <button onClick={() => handleClick("-")}>
            <p>-</p>
          </button>
        </div>
        <div className="row-4">
          <button onClick={() => handleClick("1")}>
            <p>1</p>
          </button>
          <button onClick={() => handleClick("2")}>
            <p>2</p>
          </button>
          <button onClick={() => handleClick("3")}>
            <p>3</p>
          </button>
          <button onClick={() => handleClick("+")}>
            <p>+</p>
          </button>
        </div>
        <div className="row-5">
          <button id="zero-button" onClick={() => handleClick("0")}>
            <p>0</p>
          </button>
          <button onClick={() => handleClick(".")}>
            <p>.</p>
          </button>
          <button onClick={() => handleClick("=")}>
            <p>=</p>
          </button>
        </div>
      </div>
    </div>
  );
};

export default Calculator;

로그인 후 복사

앱 구성요소

앱 구성요소는 계산기 구성요소를 렌더링하고 애플리케이션에 머리글과 바닥글을 추가합니다.

import Calculator from "./components/Calculator";
import "./App.css";
const App = () => {
  return (
    <div className="app">
      <div className="header">
        <h1>Calculator</h1>
      </div>
      <Calculator />
      <div className="footer">
        <p>Made with ❤️ by Coding4Dev</p>
      </div>
    </div>
  );
};

export default App;

로그인 후 복사

CSS 스타일링

CSS 스타일을 사용하면 계산기가 화면 중앙에 배치되고 현대적인 느낌을 줍니다. 버튼 스타일은 깔끔하고 반응성이 뛰어난 디자인입니다.

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
.app {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.header {
  margin: 20px;
}

.calculator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 350px;
  height: 450px;
  color: white;
  background-color: black;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.output-box {
  width: 300px;
  height: 100px;
  color: rgb(53, 52, 52);
  background-color: rgb(216, 216, 216);
  border-radius: 12px;
}
.output-box h1 {
  margin-left: 15px;
  font-size: 25px;
  overflow: hidden;
}
.output-box h2 {
  margin-left: 15px;
  font-size: 25px;
}
.buttons {
  margin-top: 15px;
  width: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.buttons p {
  font-size: 14px;
  font-weight: 600;
  color: white;
}
button {
  width: 72px;
  margin: 4px;
  border-radius: 12px;
  border: none;
  background-color: #536493;
}
button:hover {
  background-color: #374262;
}
#zero-button {
  width: 150px;
}
.footer {
  margin: 20px;
}

로그인 후 복사

설치 및 사용법

이 프로젝트를 시작하려면 저장소를 복제하고 종속성을 설치하세요.

git clone https://github.com/abhishekgurjar-in/Calculator.git
cd calculator-react
npm install
npm start

로그인 후 복사

이렇게 하면 개발 서버가 시작되고 기본 웹 브라우저에서 계산기가 열립니다.

라이브 데모

여기에서 계산기의 라이브 데모를 확인하실 수 있습니다.

결론

이 간단한 계산기 프로젝트는 React 기술을 연습하고 React 애플리케이션에서 상태를 관리하고 사용자 입력을 처리하는 방법을 이해할 수 있는 훌륭한 방법입니다. 공학용 계산기 모드와 같은 고급 기능을 추가하거나 추가 기능을 통합하여 이 프로젝트를 자유롭게 확장하세요.