props, useState, 계산기 예제

클래스 컴포넌트 기능 => 훅이라고 하는 기능으로 옮겨가며서
함수기반 컴포넌트 + 훅 => 클래스 컴포넌트를 대체
react-컴포넌트를 만들때 rsf 를 하면 함수기반 컴포넌트를 만들어준다.

props : 함수를 호출하는 쪽에서 매개변수를 주면 매개변수를 받아오는 객체이다.
useState: state 
props : 부모로부터 자식컴포논트한테 값을 부여하고자 할 때 props 객체를 사용한다.
state : 자신의 상태값을 저장하고 있다.  반드시 상태값은 state에 저장해야맘

onChange 이벤트는...이벤트를 발생시킨 객체에 참조를 가지고 온다.
input 태그와 state에 저장된 변수를 연동하기

 

 

import React, { useState } from 'react';

function Calculator(props) {

    const [xvalue, setXvalue] = useState(3);

    const [yvalue, setYvalue] = useState(5);

    const [result, setResult] = useState(0);

    const add = () => {

        console.log(xvalue);

        console.log(yvalue);

        setResult(parseInt(xvalue) + parseInt(yvalue));

    }

    const sub = () => {

        console.log(xvalue);

        console.log(yvalue);

        setResult(parseInt(xvalue) - parseInt(yvalue));

    }

    const multi = () => {

        console.log(xvalue);

        console.log(yvalue);

        setResult(parseInt(xvalue) * parseInt(yvalue));

    }

    const divide = () => {

        console.log(xvalue);

        console.log(yvalue);

        setResult(parseInt(xvalue) / parseInt(yvalue));

    }

    // 이함수 안만들어주면, 절대 값변경이 절대 일어나지.

    const onChangeXvalue = (e) => {

        console.log(e.target.value);

        setXvalue(e.target.value);

    }

    const onChangeYvalue = (e) => {

        console.log(e.target.value);

        setYvalue(e.target.value);

    }

    return (

        <div>

            <h1>사칙연산</h1>

            x : <input type="text" name="xvalue" value={xvalue} onChange={onChangeXvalue}/><br/>

            y : <input type="text" name="yvalue" value={yvalue} onChange={onChangeYvalue}/><br/>

            <br/>

            result : <span id="result">{result}</span><br/><br/>

            <button type="button" onClick={add}>더하기</button>

            <button type="button" onClick={sub}>빼기</button>

            <button type="button" onClick={multi}>곱하기</button>

            <button type="button" onClick={divide}>나누기</button>

            <br/>            

        </div>

    );

}

export default Calculator;