리액트(3)

import React, { useEffect, useState } from "react";
 const [counter, setCounter] = useState(0);
const App = () => {
useEffect(() => {
    console.log('Effect has been run');
  }, []);
   return (
     <h1 onClick={() => setCounter(counter + 1)}>{counter}</h1>
     );
};

useEffect 블록안에 콘솔과, 대괄호가 있음이 보입니다.
해당 대괄호가 있으면서 웹 브라우저 재랜더링이 발생할때, useEffect 는 더이상 발생하지 않습니다.

대괄호가 없었다면 h1을 클릭할때 마다 콘솔창에는 Effect has been run 이 직혔을 겁니다
대괄호 안에 counter 를 입력한다면 h1를 클릭할때마다 Effect has been run 이 콘솔창에 출력됩니다