소개
이 튜토리얼에서는 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 애플리케이션에서 상태를 관리하고 사용자 입력을 처리하는 방법을 이해할 수 있는 훌륭한 방법입니다. 공학용 계산기 모드와 같은 고급 기능을 추가하거나 추가 기능을 통합하여 이 프로젝트를 자유롭게 확장하세요.
크레딧
-
영감: 이 프로젝트는 온라인에서 사용할 수 있는 다양한 Simple 계산기에서 영감을 받았습니다.
작가
Abhishek Gurjar는 직관적이고 반응성이 뛰어난 웹 애플리케이션 구축에 중점을 둔 열정적인 웹 개발자입니다. 그의 여정을 따라가며 GitHub에서 더 많은 프로젝트를 살펴보세요.
위 내용은 React로 간단한 계산기 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
