[ReactHooks] useState, 함수형

0. 공부할것

리액트 함수형과 hooks의 useState를 사용하는 법

 

1. 목표

React를 최근에 많이 사용하고 간편한 함수형, Hook를 구구단을 통해서

component형과 비교해서 만들 적용해본다.

 

2. 결과

 

---

3-1. 깨달은 점

const Gugudan =() =>{
  const [first, setFirst]=React.useState((Math.ceil(Math.random()*9)));
  const [second, setSecond]=React.useState((Math.ceil(Math.random()*9)));
  const [value, setValue]=React.useState('');
  const[result, setResult]=React.useState('');


const onChagneInput=(e)=>{
  setValue(e.target.value);

}

const onSubmitInput=(e)=>{
  e.preventDefault();
  if(Number(value)===first*second){
    setFirst((Math.ceil(Math.random()*9)));
    setSecond((Math.ceil(Math.random()*9)));
    setValue('');
    setResult('딩동댕');
  }
  else{
    setResult('땡');
    setValue('');
  }

}

  return  (
   <div>
    <p1>{first}곱하기{second}는?</p1>
    <form onSubmit={onSubmitInput}>
      <input type="number" onChange={onChagneInput}></input>
      <button>입력</button>
    </form>
    {result}
    
   </div>
  );

 

1.

기존에 class Guguda extends react.Components{}와같이 만든 클래스 대신 하나의 함수를 만든다.

 

2.

기존에 state를 만든 방식이 아닌,

  const [first, setFirst]=React.useState((Math.ceil(Math.random()*9)));

위의 코드처럼 useState를 사용한다.

first->인[0] : 값은 스테이트값을 가르키고,

setFirst->인[1] : first를 조정하는 함수값을 가르킨다.

 

3.

기존에 components형이면 state를 변경하기 위해서 setState를 사용해야 했다. 하지만

함수형을 이용하면

setFirst((Math.ceil(Math.random()*9)));

위의 코드처럼 원하는 값을 넣어주면된다.