[React] useCallBack, Memoization, 불필요한 함수 초기화 막기

Memoization?

동일한 계산을 반복해야 할때 한번 계산한 결과값을 메모리에 저장해두었다가 계산을 다시하지않고 메모리에서 꺼내서 사용하는것이다.

이를 사용해서 얻는 이점은 동일한 계산을 반복하지않아도 되므로 계산에 사용할 자원을 아낄수있다.

 

useCallBack?

인자로 전달받은 콜백함수를 memoization하여 해당 함수가 변경되었을 경우에만 재 렌더링 한다.

 

그렇다면 왜 memoization이 필요한가?

 

state를 변경할때마다 컴포넌트는 재 렌더링된다.

이때 컴포넌트가 재 렌더링되면 함수 내부가 다 초기화된다.

함수 내부가 초기화된다는 것은 선언한 변수뿐만 아니라 함수도 초기화된다. 코드로 알아본다면

function App () {
	const [count,setCount] = useState(0);
	const hello = ()=> {console.log('hello')};
	count changeCount = ()=> {
            setCount(count+=1);
   	}
        useEffect(()=>{
            console.log('메모리주소변경');
        },[hello])
}

App이라는 함수안에 hello라는 변수에 함수가 선언되어있다. hello안에 있는것은 함수객체이고 이 hello라는 변수는

해당 함수객체의 메모리 주소를 가지고있다. 이 주소는 함수객체가 새로 생성될때마다 다른 메모리공간에 저장되고

그 메모리공간의 주소를 가져오기때문에 App함수가 렌더링 될때마다 바뀌게된다.

 

이러한 함수형 컴포넌트에서 count의 값을 변경하는것과같이 state를 변경하면 재 렌더링이 되는데 이때

hello에는 이전과 다른 메모리주소가 들어가있기 때문에 useEffect입장에서는 hello변수가 바뀌었다고 인식한다.

따라서 count값을 변경할때마다 console에 출력될것이다. 

 

이렇게 불필요한 초기화가 일어나게되는데, hello의 함수객체를 useCallBack으로 감싸 memoization시키면 사용자가 원할때 초기화를 시키면 될것이다.

 

사용법은 간단하다.

사용하고자하는 함수에 useCallBack을 감싸고 의존성배열에 초기화할 시점을 넣어주면된다.

useCallBack(()=>{
    console.log('hello');
},[])

function App () {
	const [count,setCount] = useState(0);
	const hello = useCallBack(()=> {
            console.log('hello')
    	},[]);
	count changeCount = ()=> {
            setCount(count+=1);
   	}
        useEffect(()=>{
            console.log('메모리주소변경');
        },[hello])
}

이렇게 코드를 고치면 hello변수는 맨처음 렌더링될때에만 초기화된다.

count의 값이 변경되어도 hello변수는 초기화되지 않는다.

 

참고한곳

https://ko.reactjs.org/docs/hooks-reference.html#usecallback

https://www.youtube.com/watch?v=XfUF9qLa3mU&t=26s