React로 BMI 계산기 만들기
체질량지수(BMI)는 개인이 특정 키에 비해 건강한 체중을 가지고 있는지 판단하는 데 널리 사용되는 측정 기준입니다. 이 블로그에서는 React를 사용하여 간단하면서도 기능적인 BMI 계산기를 만드는 방법을 살펴보겠습니다. 이 프로젝트에서는 사용자가 자신의 체중과 키를 입력하여 BMI를 계산하고 그 결과에 따라 분류를 제공합니다.
BMI 계산기는 React로 구축된 반응형 웹 애플리케이션입니다. 사용자의 체중(킬로그램)과 키(센티미터)를 입력으로 받아 BMI를 계산합니다. 그런 다음 앱은 저체중, 정상 체중, 과체중 또는 비만과 같은 해당 체중 분류와 함께 계산된 BMI를 표시합니다.
다음은 프로젝트 구조에 대한 간략한 개요입니다.
src/ │ ├── assets/ │ └── images/ │ └── BMI Logo.png ├── components/ │ └── BmiCalculator.jsx ├── App.jsx ├── App.css └── index.css
이 구성 요소는 애플리케이션의 핵심입니다. 사용자 입력을 처리하고 BMI 계산을 수행하며 결과를 표시합니다.
import { useState } from "react"; import logoImg from "../assets/images/BMI Logo.png"; const BmiCalculator = () => { const [weight, setWeight] = useState(""); const [height, setHeight] = useState(""); const [bmi, setBMI] = useState(""); const [result, setResult] = useState(""); function calculateBMI(weight, height) { const heightM = height / 100; const bmiResult = weight / (heightM * heightM); setBMI(bmiResult.toFixed(2)); // Round to 2 decimal places if (bmiResult < 18.5) { setResult("Underweight"); } else if (bmiResult < 24.9) { setResult("Normal weight"); } else if (bmiResult < 29.9) { setResult("Overweight"); } else { setResult("Obesity"); } } const handleCalculateBMI = () => { if (weight && height) { calculateBMI(weight, height); } }; return ( <div className="bmi-container"> <div className="logo"> <img src={logoImg} alt="BMI Logo" /> </div> <div className="input-box"> <div className="weight-input"> <h4>Weight (kg)</h4> <input type="number" value={weight} onChange={(e) => setWeight(e.target.value)} /> </div> <div className="height-input"> <h4>Height (cm)</h4> <input type="number" value={height} onChange={(e) => setHeight(e.target.value)} /> </div> </div> <button onClick={handleCalculateBMI} className="btn"> <h2>Calculate BMI</h2> </button> <div className="output-box"> <p>Your BMI : <b>{bmi}</b></p> <p>Result : <b>{result}</b></p> </div> </div> ); }; export default BmiCalculator;
App 구성 요소는 BmiCalculator 구성 요소를 래핑하고 머리글과 바닥글을 추가하는 기본 컨테이너 역할을 합니다.
import BmiCalculator from "./components/BmiCalculator"; import "./App.css"; const App = () => { return ( <div className="app"> <div className="header"> <h1>BMI Calculator</h1> </div> <BmiCalculator /> <div className="footer"> <p>Made with ❤️ by Abhishek Gurjar</p> </div> </div> ); }; export default App;
CSS는 앱이 시각적으로 매력적이고 반응성이 뛰어나도록 보장합니다.
* { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: sans-serif; background-color: #008f7d; color: white; } .app { display: flex; flex-direction: column; align-items: center; justify-content: space-between; margin-top: 30px; } .header { text-align: center; font-size: 18px; } .bmi-container { margin: 40px; width: 500px; height: 430px; background-color: white; color: black; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; } .logo img { width: 50px; height: 50px; margin: 15px; } .input-box { display: flex; flex-direction: column; align-items: center; } .input-box h4 { color: gray; } .weight-input, .height-input { display: flex; align-items: center; justify-content: space-between; gap: 25px; } .weight-input input, .height-input input { height: 27px; width: 180px; font-weight: 400; font-size: 14px; border-radius: 7px; } .btn { margin: 15px; width: 65%; height: 10%; display: flex; align-items: center; justify-content: center; background-color: #087fff; color: white; border: 0.5px solid black; border-radius: 7px; } .btn:hover { background-color: #2570c1; } .output-box { margin-top: 20px; width: 65%; height: 15%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background-color: #e2e2e2; color: black; border-radius: 7px; border: 1px solid black; } .output-box p { margin-left: 20px; line-height: 0; } .footer { text-align: center; font-size: 14px; }
로컬 컴퓨터에서 BMI 계산기를 실행하려면 다음 단계를 따르세요.
git clone https://github.com/abhishekgurjar-in/Bmi_Calculator.git
npm install
npm start
애플리케이션은 기본 웹 브라우저 http://localhost:3000에서 열려야 합니다.
여기에서 BMI 계산기의 라이브 데모를 확인하세요.
이 프로젝트에서는 React를 사용하여 간단하면서도 효과적인 BMI 계산기를 구축했습니다. 이 프로젝트는 사용자 친화적인 인터페이스를 만들기 위해 React 상태 관리, 조건부 렌더링 및 기본 스타일을 사용하는 방법을 보여줍니다. 방금 React를 시작했거나 기술을 연습하고 싶은 경우 이 프로젝트는 실습 경험을 얻을 수 있는 좋은 방법입니다.
Abhishek Gurjar는 직관적이고 반응성이 뛰어난 웹 애플리케이션 구축에 중점을 둔 열정적인 웹 개발자입니다. 그의 여정을 따라가며 GitHub에서 더 많은 프로젝트를 살펴보세요.
위 내용은 React로 BMI 계산기 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!