react.js useEffect 처음 한 번만 렌더시키고 싶을 때

state변경되면 모든 코드들이 다시 실행된다.항상!

근데 api같은건 처음 렌더될 때 한번만 하면 충분한데 그럴땐 어떻게 할까?

==> useEffect를 사용!

import {useState,useEffect} from "react"; .



function App() {
  const [counter,setValue] = useState(0);
  const onClick = () => {
  
    setValue((prevs)=>prevs+1);
  }
  console.log("i run all the time");
  // const iRunOnlyOnec = () =>{
  //   console.log('only once run');
  // }
  // useEffect(iRunOnlyOnec,[]);
  //이 부분을 익명함수로 줄여보면 다음과 같다.
  useEffect(()=>{
    console.log("only one");
  },[])

  return (
   <div>
     <h1>Welcome! {counter}</h1>
     <button onClick={onClick}>click me</button>
   </div>
  );
}

export default App;

콘솔로 보면 확인 가능!!