[ React ] useEffect, useMemo, useCallback

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 : 함수가 재생성 되는것을 방지할 때