📌 useEffect
이번 시간에 알아볼 것은 특정 코드를 처음 한번만 실행하고 다시는 실행되지 않게 하는 방법이다.
이것은 useEffect 를 이용하여 구현할 수 있다.
- useEffect 는 두 개의 argument를 가지는 function으로, create-react-app에서 useState와 마찬가지로 import해서 사용하는 것이 가능하다.
- 첫번째 인자로는 처음에 화면이 render될 때 딱 한번만 실행하고 싶은 코드가 들어간다.
다음과 같이 App.js에 useEffect를 사용한 코드를 작성하고 어떤 일이 벌어지는지 살펴보자.
import { useState, useEffect } from "react"; // useState와 useEffect를 import 한다.
function App() {
const [counter, setValue] = useState(0);
const onClick = () => setValue((prev) => prev + 1);
console.log("i run all 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;
결과로 useEffect가 App 컴포넌트의 첫 번째 render 시점에 iRunOnlyOnce 함수를 호출했다. 따라서 'i run all time'과 'i run only once'가 콘솔 창에 모두 뜨게 된다.
그럼 이제 버튼을 눌러 카운트를 증가시켜 App 컴포넌트의 state에 변화를 줘 보자.
결과로 버튼을 눌러 state가 변할 때마다 'i run all time'은 매번 뜨지만 'i run only once'는 아예 뜨지 않는 것을 볼 수 있다.
코드를 좀 더 단순화해서 useEffect 함수 안에 익명 함수를 인자로 넣어 보자.
function App() {
.....
console.log("i run all time");
useEffect(() => { // 주목!
console.log("CALL THE API.....");
}, []);
return (
.....
결론적으로 useEffect 함수에 첫 번째 인자로 1번만 실행시키고 싶은 함수를 넣고 두 번째 인자까지 넣으면 해당 코드는 단 한번만 실행됨을 알 수 있다.
두 번째 인자에 대해서는 다음 시간에 알아볼 것이다.
useMemo와 useEffect의 차이
댓글