React) input과 useState를 활용한 덧셈 기계 만들기

input value값을 가져와서 이런 간단한 덧셈기계 만들어보자.

자바스크립트에서는 input의 value값에 접근할 때

const input = document.querySelector('input').value;

이런식으로 직접 DOM에 접근해서 값을 추출해왔다.
하지만, DOM을 직접 건들이지않는 React에서는 어떻게 접근할까?
바로 값을 저장하고, 변경할 수 있는 함수를 갖는
state라는 개념을 사용한다.

---

전체코드

import React from 'react';

const App = () => {
const [left,setLeft] = React.useState(0);
const [right, setRight] = React.useState(0);
const [result, setResult] = React.useState(0);


  return (
  <>
  <input type='number' onChange={(e)=>{setLeft(parseInt(e.target.value),10)}} />
  +
  <input type='number' onChange={(e)=>{setRight(parseInt(e.target.value),10)}}/>
  =
  <input type='number' disabled value={result} />
  <button type='button' onClick={()=>{
    setResult(left + right)
  }}>계산</button>
  </>
  );
}
export default App;

input 값 제어가능한 state생성

input의 value 값을 저장해서 갖다가 쓰게해주고, 값을 바꿔줄 함수를 갖는 state가 필요함!

const [left,setLeft] = React.useState(0);  //왼쪽 input
const [right, setRight] = React.useState(0);  //오른쪽 input
const [result, setResult] = React.useState(0);  //왼쪽+오른쪽 결과값 input

값을 받는 input에 이벤트 걸기

  return (
  <>
  <input type='number' onChange={(e)=>{setLeft(parseInt(e.target.value),10)}} />
  +
  <input type='number' onChange={(e)=>{setRight(parseInt(e.target.value),10)}}/>
  =
  <input type='number' disabled value={result} />
  <button type='button' onClick={()=>{
    setResult(left + right)
  }}>계산</button>
  </>
  );
}

1. 값이 입력되는 input (여기서는 left, right)는 해당 value값이 변경되었을 때, setter함수를 실행해 value 값을 state에 저장해준다.
2. 값을 더해 출력하는 input의 value값은 result라는 state로 연결해두고, {result}
3. button을 눌렀을 때, 그 state값을 변경하는 setter함수안에서 연산을 해 값을 변경해준다.