react 6 (useEffect)

useEeffect(()=>{},[])

• useEeffect(()=>{},[]) ==> 배열이 비어있을 경우에는 compronent가 실행될때 처음 한번만 실행된다.

useEffect(()=>console.log("useEffect 실행"),[])

• useEeffect(()=>{},[products]) ==> component가 실행될때 처음 한번 실행된후 products의 값이 바뀔때마다 useEffJavaScriptect가 실행됨

useEffect(()=>console.log("useEffect의 값이 바뀜"),[products])

• useEeffect(()=>{},[products,count]) ==> component가 실행될때 처음 한번 실행된후 products와 count 중 하나라도 값이 바뀌면 useEffect가 실행됨

useEffect(()=>console.log("useEffect의 값이 바뀜"),[products,count])

• useEffect가 종료되는 시점에 데이터가 변경된다
  

이전값 prev

  return (
      <div className='counter'>
        <span className='number'>{num}</span>
        <button className='button' onClick={()=>{
          // 아래 코드 세줄에서는 값의 변화가 없다
          // 상태값은 함수가 종료후 다시 함수가 실행될때 반영되기 때문이다.
          // num은 모두 0이다.

          // setnum(num +1)
          // setnum(num +1)
          // setnum(num +1)

          // prev는 이전값을 가지고 있음
          // setnum((prev)=> {
          //   return prev + 1})

          setnum((prev)=> {
            return prev + 1})
            
          // setnum((prev)=> prev + 1)
          // setnum((prev)=> prev + 1)
          }}>1씩증가</button>

          <form action="#">
            <input type="text" />
          </form>
      </div>
  )