useEffect, useMemo, useCallback에 대하여
useEffect()
- 시작할 때 한번 실행시키거나, 어떤 요소가 업데이트되면 그에 따라 실행시켜줍니다.
// 기본
useEffect(() => {}, []);
{} 동작하는 부분, [] 내부 요소가 업데이트되면 작동
사용방법
import { useEffect, useState } from "react";
const App = () => {
const [test, setTest] = useState(false);
useEffect(() => {
if (test === true) {
console.log('test가 true일때만 실행됩니다. 이후 test는 다시 false로 초기화 시켜줍니다.');
setTest(false);
}
}, [test]);
};
export default App;
위 코드는 test 변수가 업데이트 될때마다 useEffect에 전달한 함수가 실행됩니다.
useCallback()
- 내가 원하는 타이밍에 실행시킬 수 있는 함수를 만들기 위해 사용합니다.
사용방법
import { useCallback, useEffect, useState } from "react";
const App = () => {
const [test, setTest] = useState(false);
const [inputValue, setInputValue] = useState('');
useEffect(() => {
if (test === true) {
inputAdd();
setTest(false);
}
}, [test, inputAdd]);
const inputAdd = useCallback(() => {
console.log(`inputValue가 업데이트 될때마다 실행되지 않고 test가 true가 될때만 실행시키고 싶습니다.${inputValue}`)
}, [inputValue]);
};
export default App;
위 코드는 inputValue 내용을 test가 true가 될때마다 useEffect의 inputAdd()함수가 호출됩니다.
inputValue(내가 원하지 않는 타이밍)가 업데이트 될때가 아닌 test(내가 원하는 타이밍)일 때 함수를 실행시킬 수 있습니다.
useMemo()
- 원하는 값을 업데이트하기 위해 사용됩니다.
:: useMemo는 값을 반환해줍니다. useMemo는 []가 변하면 {}내부를 실행시키고, 그 함수의 반환 값을 반환해줍니다.
사용방법
import { useMemo, useState } from "react";
const App = () => {
const [test, setTest] = useState(0);
const [test2, setTest2] = useState(0);
useMemo(() => {
console.log('실행', test)
}, [test]);
return (
<>
<button onClick={() => setTest((current) => (current + 1))}>Update</button>
<button onClick={() => setTest2((current) => (current + 1))}>Update2</button>
</>
);
};
export default App;
위 코드는 [test]가 변할 때만 내부 console.log()를 실행합니다. 그렇기 때문에 Update2버튼을 눌러서 App 컴포넌트 함수를 전부 재실행시켜도 test가 변화하지 않았기 때문에 useMemo에 변화는 생기지 않습니다.
useCallback과 useMemo
useMemo는 memoization된 '값'을 반환하고, useCallback은 memoization된 '함수'를 반환합니다.
:: memoization : 기존 연산의 결과 값을 메모리 어딘가에 저장하고, 동일한 입력이 들어왔을 경우 재활용하는 프로그래밍 기법입니다. memoization를 많이 사용하면 메모리를 많이 잡아먹게 되지만, 적절히 사용하면 중복 연산을 피할 수 있기에 성능을 최적화 시킬 수 있습니다.
목적
useMemo : 함수의 연산량이 많을 때, 이전 결과 값을 재사용할 때
useCallback : 함수가 재생성 되는것을 방지할 때
