Netflix 클론코딩 기록 남기기 (3) - useCallback() 과 콜백 함수

클론코딩을 진행하다 보니 useCallback() 함수를 사용해야 하는 경우가 많았다. 그래서 'useCallback() 함수는 무슨 역할을 하는지, 왜 써야 하는지'에 대하여 자세히 공부해 보아야겠다는 생각이 들었다.

 

useCallback() 함수란?

 useCallback() 함수는 React에서 사용자 정의 함수를 기억하는데 사용된다. 이 함수의 주요 목적은 통상적으로 말하면 성능 최적화와 렌더링 최적화를 달성하는 것이라고 한다. 이게 무슨 말이냐고 하면 일반적으로는 React 컴포넌트 내에서 함수를 정의하면 해당 함수들은 매 렌더링 주기마다 새로운 함수 객체가 생성된다. 이로 인해 React는 다시 렌더링 될 때마다 함수를 새로운 것으로 간주하고 해당 함수를 참조하는 컴포넌트 및 하위 컴포넌트가 다시 렌더링 된다. React의 렌더링 주기마다 새로운 객체들이 생긴다고 하면 화면 작동을 진행한 지 오랜 시간이 지나고 여러 가지 작업을 하게 되면 너무 많은 메모리가 낭비되는 현상이 생긴다.

 

 이와 같은 현상을 해결하기 위해 useCallback() 함수가 사용된다. useCallback() 함수의 파라미터는 두가지이다.

내가쓸함수 = useCallback(함수,배열)

첫 번째 파라미터로는 함수, 두 번째 파라미터로는 배열을 입력받는다. 배열에 있는 변수들이 변경될 때만 내가 쓸 함수를 새로 생성한다. 고로 위 useCallback()을 활용하면 쓸데없이 새로 만들어져 낭비되는 메모리를 아낄 수 있는 것이다!!!

 

위 글을 쓰다가 궁금해진 부분이 하나 더 있었다.. 그래서 콜백함수가 뭐지??

 

콜백 함수란?

 콜백 함수가 무엇인지 궁금하여 이것저것 찾아보았더니, 보통 콜백 함수는 다른 함수의 파라미터로 전달되는 함수를 콜백함수라고 한다. 그러면 왜 콜백함수를 이용하는 걸까?

1. 비동기 작업을 처리할 때 많이 사용한다.
2. 이벤트가 발생하였을 때 실행할 함수를 정의하여 이벤트 처리를 수행할 때 사용한다.
3. 콜백 함수를 사용하면 함수를 모듈화 할 수 있고, 그러면 다른 함수에 쉽게 전달할 수 있다. 이는 코드의 재사용성을 높이고 모듈 간의 상호작용을 가능하게 한다.
4. 콜백 함수를 사용하여 함수가 비동기적으로 실행되도록 예약하거나 지연시킬 수 있다.

이러한 이유들로 콜백 함수를 많이 사용하는 것 같다. 콜백 함수를 사용하면 위와 같이 프로그래밍에서 이벤트 처리, 비동기 작업, 모듈화, 코드의 유연성, 가독성이 좋은 코드 작성 등에서 중요한 역할을 할 수 있다!!!