분류 Reactjs

계산기 추가하기 - challenge 5

컨텐츠 정보

  • 조회 316 (작성일 )

본문

프런트 엔드 응용 프로그램에 데이터를 저장하고 응용 프로그램 또는 응용 프로그램 구성 요소 전체에 저장된 데이터를 다시 사용하는 것은 최신 프런트 엔드 응용 프로그램의 필수 요소입니다.


CodePen Final : https://codesandbox.io/s/64800qwkw3 CodePen 초보자 : https://codesandbox.io/s/q8nxoyqn49


이 React 도전 과제에서는 두 숫자의 합계를 표시하는 간단한 계산기를 만들 것입니다.


https://scotch.io/courses/10-react-challenges-beginner/adding-calculator 


과제 : 두 개의 숫자 추가 


이 도전 과제에 대해 입력 요소에서 두 개의 숫자를 받고 두 숫자를 모두 추가합니다. 이 숫자의 합계를 같은 페이지에 표시하십시오. 이 과제의 주요 과제는 다음과 같습니다.

  • input 숫자 저장
  • 숫자 추가
  • 페이지에 합계 표현

시동 코드


신속하게 시작하려면 이 CodeSandbox를 포크하십시오. https://codesandbox.io/s/q8nxoyqn49


기본 CodeSandbox에는 응용 프로그램의 스타일링과 응용 프로그램의 기본 필수 요소가 포함되어 있습니다. 부담 없이 사용하십시오.


다음은 최종 응용 프로그램의 모양입니다.


uwg2cjo02cg9ydnluiwc.mp4 


보너스 포인트 


보너스로 다른 산술 연산을 수행하고 응용 프로그램의 버튼에 할당하십시오. 예를 들어, 곱하기, 빼기 및 나누기 버튼을 추가하십시오.


시작하려면 이 CodeSandbox를 포크하십시오. https://codesandbox.io/s/q8nxoyqn49 


솔루션 : 두 개의 숫자 추가 이 과제는 React가 구성 요소 데이터를 상태에 저장하고 이 데이터를 구성 요소 전체에 재사용하는 능력에 크게 의존합니다.


이 과제는 3 단계로 완료됩니다.

  • 두 입력에 대한 상태를 만듭니다.
  • 숫자 추가 처리.
  • 계산 된 합계를 표시하십시오.


두 입력에 대한 상태 생성 


useState React 후크를 활용하여 기능 구성 요소에 상태 변수를 만듭니다. 다음을 사용하여 App() 구성 요소의 맨 위에서 useState를 가져옵니다.


import React, { useState } from 'react';

App() 구성 요소에서 useState에서 destructured까지 세 가지 상태 변수를 만듭니다.

  • 첫 번째 숫자 값을 누릅니다.
  • 두 번째 숫자의 값을 누릅니다.
  • 합계의 값을 저장하십시오.

다음과 같이하십시오.


import // ...

function App(){
    const [number1, setNumber1] = useState(0);
  const [number2, setNumber2] = useState(0);
  const [total, setTotal] = useState(number1 + number2);

    return (
        // Return component's JSX
    )
}

우리는 숫자의 기본값을 0으로 설정하고 합계를 두 숫자의 합계로 설정합니다. 기본값은 0입니다.


이제 상태에 추가 할 숫자의 값을 저장하고 검색하여 이 데이터 값을 입력 요소에 할당합니다. 또한 state에 저장된 데이터의 값은 onChange 입력 이벤트를 사용하여 입력에서 업데이트 됩니다. App() 구성 요소의 반환 된 JSX에서 다음을 사용하여 입력 요소의 value 및 onChange 특성을 지정합니다.


import // ...

function App() {

    // Component variables

  return (
    <div className="App">
      <h1>Adding Two Numbers</h1>

      <div className="number-inputs">
        <input
          type="number"
          value={number1}
          onChange={e => setNumber1(+e.target.value)}
          placeholder="0"
        />
        <input
          type="number"
          value={number2}
          onChange={e => setNumber2(+e.target.value)}
          placeholder="0"
        />
      </div>

      <button>Add Them!</button>

      <h2>{total}</h2>
    </div>
  );
}

이를 통해 입력 요소의 값을 지정하고 시작 코드의 정적 제로에서 상태에서 가져온 total 값으로 표시되는 값을 업데이트합니다.


숫자 추가 처리 


우리는 현재 상태에서 저장된 번호를 업데이트 할 수 있습니다. 동일한 상태에서 이러한 번호를 가져 와서 조작 할 수 있습니다.


App() 구성 요소에서 함수를 작성하여 각 상태 변수에서 값을 가져온 두 숫자를 추가하십시오. 다음과 같이하십시오.


import // ...

function App() {

    // State variables
    const [number1, setNumber1] = useState(0);
  const [number2, setNumber2] = useState(0);
  const [total, setTotal] = useState(number1 + number2);

    // Function to add numbers and update total in state
  function calculateTotal() {
    setTotal(number1 + number2);
  }

  return (
    // Returned JSX
  );
}

calculateTotal 함수가 호출되면 total가 업데이트 되는 동안 첫 번째와 두 번째 숫자가 추가됩니다.



"Add them!"업데이트 버튼을 클릭하면 이 기능이 호출됩니다. 다음과 같이하십시오.


import // ...

function App() {

    // Component variables

  return (
    <div className="App">
      <h1>Adding Two Numbers</h1>

      <div className="number-inputs">

                // Input elements

      </div>

      <button onClick={calculateTotal}>Add Them!</button>

      <h2>{total}</h2>
    </div>
  );
}

이렇게 하면 버튼을 클릭하면 두 숫자가 모두 추가되고 합계가 페이지에 표시됩니다.


다음은 최종 응용 프로그램의 모양입니다.


vnmcz22wrspbxceyb4wx.mp4 


완성 된 CodeSandbox는 다음에서 찾을 수 있습니다. https://codesandbox.io/s/64800qwkw3


결론


이 React 도전 과제에서는 두 개의 숫자를 더하고 합계를 표시하는 간단한 계산기를 만들었습니다.