React.js로 구현한 계산기 애플리케이션 제작 방법

09 Nov 2023

reactjs

React.js는 사용자 인터페이스를 구축하기 위해 자주 사용되는 JavaScript 라이브러리입니다. 이를 활용하여 계산기 애플리케이션을 구현하는 방법을 알아보겠습니다.

시작하기 전에

Node.js와 npm이 설치되어 있는지 확인하세요.
React 개발 환경을 설정하기 위해 Create React App을 사용할 것입니다.

프로젝트 세팅하기

새 디렉토리를 만들고 해당 디렉토리로 이동합니다.
아래 명령어를 사용하여 Create React App을 설치합니다.
```
npx create-react-app calculator-app
```
디렉토리로 이동하고 애플리케이션을 실행합니다.
```
cd calculator-app
npm start
```

컴포넌트 생성하기

src 폴더 내에 components 폴더를 생성합니다.
components 폴더 내에 Calculator.jsx 파일을 생성합니다.

import React, { useState } from 'react';

const Calculator = () => {
  const [result, setResult] = useState('');

  const handleClick = (value) => {
    setResult(result.concat(value));
  };

  const handleCalculate = () => {
    try {
      setResult(eval(result));
    } catch (error) {
      setResult('계산 오류');
    }
  };

  const handleClear = () => {
    setResult('');
  };

  return (
    <div>
      <h1>계산기</h1>
      <input type="text" value={result} disabled />
      <div>
        <button onClick={() => handleClick('1')}>1</button>
        <button onClick={() => handleClick('2')}>2</button>
        <button onClick={() => handleClick('3')}>3</button>
        <button onClick={() => handleClick('+')}>+</button>
        <button onClick={() => handleClick('4')}>4</button>
        <button onClick={() => handleClick('5')}>5</button>
        <button onClick={() => handleClick('6')}>6</button>
        <button onClick={() => handleClick('-')}>-</button>
        <button onClick={() => handleClick('7')}>7</button>
        <button onClick={() => handleClick('8')}>8</button>
        <button onClick={() => handleClick('9')}>9</button>
        <button onClick={() => handleClick('*')}>*</button>
        <button onClick={() => handleClick('0')}>0</button>
        <button onClick={() => handleClick('.')}>.</button>
        <button onClick={() => handleCalculate()}>=</button>
        <button onClick={() => handleClear()}>C</button>
      </div>
    </div>
  );
};

export default Calculator;

App 컴포넌트 수정하기

src 폴더 내에 App.js 파일을 엽니다.
아래와 같이 코드를 수정합니다.

import React from 'react';
import Calculator from './components/Calculator';

const App = () => {
  return (
    <div className="App">
      <Calculator />
    </div>
  );
};

export default App;

애플리케이션 실행하기

터미널에서 npm start 명령어를 실행하여 애플리케이션을 실행합니다.
웹 브라우저에서 http://localhost:3000로 접속하여 계산기 애플리케이션을 확인합니다.

마치며

이러한 방식으로 React.js를 사용하여 간단한 계산기 애플리케이션을 구현할 수 있습니다. React 컴포넌트를 이용하여 사용자 인터페이스를 구축하고, 상태 관리를 위해 useState를 사용하였습니다. 계산식을 처리하기 위해 eval 함수를 활용하였으며, 예외 처리를 통해 계산 오류를 방지할 수 있습니다.

#React #JavaScript

참고: