TIL. React Hooks_useState

useState with previous state

import React, {useState} from 'react'

function HookCounterTwo(){
  const initialCount=0
  const [count,setCount]=useState(initialCount)
  
  const incrementFive=() =>{
     for(let i=0; i<5; i++){
       setCount(prevCount =>prevCount +1)
     }
  }
  return(
    <div>
    Count:{count}
    <button onClick={()=>setCount(initialCount)}> Reset</button>
    //argument에 initialCount를 줘서 다시 0으로 돌아가게 설정
  <button onClick={()=> setCount(prevCount =>prevCount +1)}>Increment</button>
    <button onClick={()=> setCount(prevCount =>prevCount -1)}>Decrement</button>
  <button onClick={incrementFive}> Increment 5 </button>
   </div>
   )
}
export default HookCounterTwo

기억해두면 좋은 점

1. setState는 비동기(async)다. 그래서 for loop안 현재 value는 0이다. 이전의 setState가 완료되면 setState가 업데이트되도록 하자. 비동기이기에 함수로서 state를 업데이트하는 것이 좋다!
   2.setCount() Function안에 화살표 함수를 전달할 수 있다. 화살표함수는 prevState를 인자로 가지고 아무 이름으로 작성할 수 있다.

useState with object

import React, {useState} from 'react'

function HookCounterThree(){
  const [name,setName] =useState({firstName:'',lastName:''})
  return(
    <form>
    <input type="text" value={name.firstName} onChange={e=>setName({...name, firstName:e.target.value})}/>
     <input type="text" value={name.lastName} onChange={e=>setName({...name, lastName:e.target.value})}/>
    <h2> your first name is - {name.firstName}</h2>
    <h2> your last name is - {name.lastName} </h2>
    </form>
   )
}
export default HookCounterThree

기억해두면 좋은 점

1. setName 안에 ...name을 적어주는 이유?
   spread operator를 이용해 name의 값을 복사해주지 않으면 onChange로 setName 값을 바꿀 때, firstName과 lastName이 동시에 바뀌지 않는다. firstName만 바뀌고 lastName은 바뀌지 않고 사라져버린다..

useState with Array

import React, {useState} from 'react'

function HookCounterFour(){
  const [items,setItems]=useState([])
  
  const addItem=() =>{
    setItems([...items, {
      id:items.length,
      value:Math.floor(Math.random()*10)+1
    }])
  }
  
  array안 모든 items복사하고 객체를 추가한다.
  가장 처음iteration은 빈 배열이니 id는 0이 되고 value는 1과 10 사이 랜덤 숫자
 그 다음 iteration의 id는 1이 된다.
  
    
  return(
    <div>
    <button onClick={addItem}> Add a number </button>
     <ul>
    {
      items.map(item =><li key={item.id}>{item.value}</li>))
    }
    </div>
    )
}

export default HookCounterFour

Summary

• useState hook은 함수형 컴포넌트에 state를 추가할 수 있게 해준다.
  클래스형 컴포넌트에서 state는 항상 object,
  그러나 useState hook에서는 state는 항상 object일 필요 없다. array,boolean,number가 될 수도 있다.
• 그리고 useState hook은 2 elements array를 리턴한다.
  첫번째 element는 state의 current value이고 두번째 element는 state setter function이다. (setter function은 컴포넌트를 re-render하게 한다)
• object, array를 다룰 때 state variable을 sperad operator로 복사하고나서 setter function을 호출해야 한다