드디어 create-react-app으로 실행하는 코드.
import { useState } from "react";
function App(){
const [counter, setValue] = useState(0);
const onClick = () => setValue((prev) => prev + 1);
console.log('render');
return(
<div>
<h1>{counter}</h1>
<button onClick={onClick}>Click me</button>
</div>
)
}
export default App;
예를 들어 코드에서 API를 call했다고 해보자. 그런데 state 변화 때마다 API call이 계속 re-render된다면, 이것은 해결해야 할 문제다.
어떻게 하면 특정 코드들은 첫번째의 컴포넌트 render에서만 실행되게 할 수 있을까?
바로.. useEffect 함수를 이용하면 된다!
useEffect(effect: EffectCallback, deps?:DependencyList): void
첫번째 argument(인자)는 우리가 딱 한 번만 실행하고 싶은 코드.
두번째 argument(인자)는... 우선 빈 배열로 주고 실험.
아래 코드를 실행시키면 console에는 두 코드가 한번 찍히고, 그 뒤 state가 변화될 때마다 i run all the time만 찍히게 된다.
import { useEffect, useState } from "react";
function App(){
const [counter, setValue] = useState(0);
const onClick = () => setValue((prev) => prev + 1);
console.log('i run all the time');
const iRunOnlyOnce = () => {
console.log("i run only once");
}
useEffect(iRunOnlyOnce, []);
return(
<div>
<h1>{counter}</h1>
<button onClick={onClick}>Click me</button>
</div>
)
}
export default App;