React_useEffect Hook

App

import React from "react"

import { useState, useEffect } from "react"

export default function App(){

  //컴포넌트 함수 안에서 useState 선언

  //1. [의존성배열]에 state값이 있는 경우: number값이 변경되면 부수효과함수가 재실행됨

  //2. [] 빈배열을 지정한 경우, 단 한번만 실행

  //3. 배열 지정 안 하면 App이 재랜더링될 때마다 부수효과함수가 재실행됨

  //4. strict 모드로 실행하면 2번 호출( 1번 호출하려면 index.js 수정 )

  const [number, setNumber] = useState(0);

  const [number2, setNumber2] = useState(0);

  useEffect(() => {                                  // DOM이 생성된 후 useEffect 함수 실행됨

    console.log("useEffect Number 값이 변경됨")      // 부수효과 함수

  }, [number]);                                      // 빈 배열 -> 한번만 실행 || 빈배열이 아니면 계속 실행

                                                    //  number2가 변경될 때는 변화 없음

  function onIncrease(){

    setNumber(number + 1);

  }

  function onDecrease(){

    return  number<= 0 ? 0 : setNumber(number - 1);

  }

  function onIncrease2(){

    setNumber2(number2 + 1);

  }

  function onDecrease2(){

    return  number2 <= 0 ? 0 : setNumber2(number2 - 1);

  }

  return(

    <>

      <h1>{number}</h1>

      <button onClick={onIncrease}>+</button>

      <button onClick={onDecrease}>-</button>

     

      <hr></hr>

      <h1>{number2}</h1>

      <button onClick={onIncrease2}>+2</button>

      <button onClick={onDecrease2}>-2</button>

    </>

  )

}