( props, state, 이벤트핸들링 예제 ) 두개의 input을 받아서 연산하기

함수형 컴포넌트로 작성

 

App. js

import React from "react";
import Counter from "./Counter";

const App = () => {
  return <Counter role="연산">컴포넌트</Counter>; //props사용
};

export default App;

 

Counter. js

// input을 두개 받아서 + or - 버튼을 누르면  연산하기
import React, { useState } from "react"; //함수형 컴포넌트라 useState사용

const Counter = ({ role, children }) => {
  //props파라미터로 받기

  const [number, setNumber] = useState({ one: "", two: "" }); //객체 초기값
  const [result, setResult] = useState(""); //결과값

  const { one, two } = number; //객체

  const handleChange = (e) => {
    //input태그의 onClick이벤트에 넣어줄 핸들링 함수
    const next = {
      //객체 만들기
      ...number, //기본값 복사하고
      [e.target.name]: e.target.value, 
      //새로운 값은 덮어씌우기 (name이 가리키는 값 (one or two)= 입력값)
    };
    setNumber(next); //만든 객체를 setNumber에 넣어줌
  };
  const handlePress = (e) => {
    //onKeyPress이벤트에 넣어줄 핸들링 함수
    if (e.key === "Enter") {
      alert(one + " 와 " + two + "가 입력되었습니다."); //팝업창
      setNumber({ one: "", two: "" }); //초기화
      setResult("");
    }
  };
  const handleSum = (e) => {
    //더하기 버튼의 onClick이벤트에 넣어줄 핸들링 함수
    setResult(parseInt(one) + parseInt(two)); //result 업데이트
  };
  const handleMin = (e) => {
    //빼기 버튼의 onClick이벤트에 넣어줄 핸들링 함수
    setResult(one - two);
  };

  return (
    <div>
      {role}하는{children}입니다.
      <div>
        <input
          name="one" //[e.target.name]
          value={one}
          placeholder="첫번째 숫자"
          onChange={handleChange}
        />
        <input
          name="two" //[e.target.name]
          value={two}
          placeholder="두번째 숫자"
          onChange={handleChange}
          onKeyPress={handlePress}
        />
        <button onClick={handleSum}>더하기</button>
        <button onClick={handleMin}>빼기</button>
        <h1>
          {one}와 {two}가 입력되었습니다. <br />
          결과값: {result}
        </h1>
      </div>
    </div>
  );
};
Counter.defaultProps = {
  role: "기본값",
};

export default Counter;

• input 2개, button 2개
• props: role, children
• state: 객체 형태의 number {one( 첫번째 숫자 ), two( 두번째 숫자 )} , 결과값을 저장하는 result
• input의 name 속성을 key값으로 사용해서 number업데이트 ( [e.target.name] : e.target.value)
• onKeyPress 이벤트가 있을 때 팝업창 띄우고 state값 (number, result) 초기화
• parseInt( )를 통해 string type이었던 one, two 값을 정수타입으로 바꿔줌