- React의 컴포넌트 안에 로컬함수를 정의하면 컴포넌트가 다시 렌더링 될 때마다 함수가 새로 만들어진다
- 자세히 말하면, 함수가 새로운 메모리 주소에 다시 만들어지는 것이다
- useCallback을 사용하면 특정 조건을 만족할 때만 함수를 새로 만들 수 있다.
useCallback이란?
- React 공식문서에 'useCallback'은,
- "dependencies(특정조건)에 의해서만 바뀌는 memorized 된 콜백을 반환한다"
- 즉, dependencies가 바뀔 때만 함수가 새로 만들어진다.
콜백함수?
- 다른 함수가
실행을 끝낸 뒤 실행 되는, callback되는 함수.
- 함수를 만들 때, parameter를 함수로 받아서 쓸 수 있는데 그 함수는 callback이다.
- 자바스크립트에서 함수는 object라고 말한다. 그래서 함수는
다른 함수의 인자로 쓰일수도, 어떤 함수에 의해 리턴 될 수도 있다. 이런 함수를 고차함수 라고 한다.
- 결국,
인자로 넘겨지는 함수를 = callback()함수라고 한다.
- 단지 함수를 등록하기만 하고, 어떤
이벤트가 발생했거나 특정 시점에 도달했을때 시스템에서 호출하는 함수이다.!
- 필요한 이유 : 변수의 유효범위(scope), 동기/비동기처리
동기 : 하나의 요청이 오면 완료가 된 후에 다음 요청을 실행하는 방식 (순차적 로직흐름)
비동기 : 어떤 요청이 오면 완료가 되기 전에 다음 요청을 실행하는 방식 (동시효율적 처리가능, 즉시응답X.때문에 예상밖 결과나올수도 있음)
- 콜백함수는 때로는 가독성이나 코드재사용 면에서도 사용된다.
- 비동기방식으로 작성된 함수를 동기처리하기 위해서도 필요하다.
(1) 콜백함수의 기본형태이다.
const function = (callback) => {
callback();
}
const callback = () => {
console.log('콜백이다.');
}
function(callback);
::: 결과 | 콜백이다.
(2) introduce함수를 실행하면, callback자리를 새로운함수 function(name)으로 지정해주면서 함수 안에서 callback(fullName)으로 실행되는 함수가 된다.
const introduce = (lastName, firstName, callback) => {
const fullName = lastName + firstName;
callback(fullName);
}
const introduce = ('최', 'ik준', function(name)) => {
console.log(name);
};
::: 결과 | 최ik준
