저번시간에 설명했던 문제에 대한 해답을 찾아보자!

가끔은 코드의 렌더를 제한하고 싶다는 것..

이때

useEffect를 사용한다 !!

import { useState, useEffect } from "react";
// 이런 문제를 해결하기 위해 JS팀이 우리를 위해 만들어 준 것이 바로 useEffect이다.
//useEffect는 두개의 argument를 가지는 function이다. 첫번째 argument는 내가 딱 한번만 실행하고 싶은 코드가 될 것이다.
// 두번째 argument는 마법같은 친구이다. 나중에 얘기해 주겠다.
function App() {
const [counter, setValue] = useState(0);
const onClick = () => setValue((prev) => prev + 1); // state값 +1
console.log("I run all the time");
//이 코드는 state가 변화할 때마다 실행되는 반면
const iRunOnlyOnce = () => {
  console.log("I run only once");
};
// useEffect(()=> iRunOnlyOnce, []);
//이 코드는 한번만 실행되었다. 이것은 정말 좋은 소식이다 !
useEffect(() => {
  console.log("Call the API");
}, []);
//useEffect는 쉽게 말해서 나의 코드가 딱 한번만 실행될 수 있도록 보호해준다.
//이 것은 state가 변화하든 무슨 일이 일어나든 코드가 단 한번만 실행하게 된다. 어떤 일이 일어나도 이 코드는 한번만!!
return (
  <div>
    <h1>{counter}</h1>
    <button onClick={onClick}>click me</button>
  </div>
);
}
export default App;

useEffect는 쉽게 말해서 나의 코드가 딱 한번만 실행될 수 있도록 보호해준다.

이 것은 state가 변화하든 무슨 일이 일어나든 코드가 단 한번만 실행하게 된다. 어떤 일이 일어나도 이 코드는 한번만!!