어쩌다가 TIL?

요즘 리액트를 다루는 기술(김민준 지음)으로 공부를 하고 있습니다.
책을 통해서 공부하면서 제일 많이 느끼는 것은 내가 얼마나 주먹구구로 리액트를 사용했는가 입니다. Todo정도는 껌인줄 알았는데😢

모든 공부는 예제를 통해서 하고 있지만, 책을 통해서 공부한다는건 생각보다 더 의미있는거 같습니다. 공부를 시작한지 얼마되지는 않았는데, 현재까지 장점이라 생각되는 것은 다음과 같습니다.
1. 리액트라는 언어로 책까지 출판하는 저자는 이유가 있다.(역시 VELOPERT님🙏)
2. 지금까지 내가 만든 어플리케이션은 스택오버플로우와 블로그의 집합체일뿐 개념은 없다.
3. 함수 하나를 쓰더라도 생각하고, 정갈하게
4. 다른사람의 코드로(심지어 정리된) 공부하는 기회

서론이 너무 길군요😆
바로 오늘 TIL을 다루겠습니다.

useCallback

현재 10장의 Todo앱 만들기과정을 공부중인데, useCallBack을 사용합니다. 부끄럽게도 지금까지 리액트를 사용하면서 단 한번도 import해본적이 없습니다🤫

그런데 TodoInsert.js를 작성하는 과정에 다음과 같이 설명되어 있습니다.

컴포넌트가 리렌더링 될 때마다 함수를 새로 만드는 것이 아니라, 한번 함수를 만들고 재사용할 수 있도록 useCallBback Hook을 사용하겠습니다.

위 설명을 보자마자 개념을 잡아야 한다는 확신이 들어서 공식문서에서 도움을 받아 정리하게 되었습니다.

❗️이 글에서 Hook의 개념은 다루지 않습니다. Hook의 개념은 저의 미디엄 블로그를 참고해주세요.

역할

useCallback은 메모이제이션 된 콜백을 반환합니다.

메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술이다. 메모아이제이션이라고도 한다. (출처 : 위키백과)

사용법

인라인 콜백과 그것의 의존성 값의 배열을 전달해서 사용합니다. 반환되는 그 메모이제이션 버전은 콜백의 의존성이 변경되었을 때에만 변경됩니다. 이것은, 불필요한 렌더링을 방지하기 위해 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용합니다.

클래스형 컴포넌트의 LifeCycle 관점으로 바라본다면 'shouldComponentUpdate'를 예로 들 수 있습니다.(이것도 저의 블로그에 친절한 설명이🤗)

주의!

의존성 값의 배열이 콜백에 인자로 전달되지는 않습니다. 그렇지만 개념적으로는, 이 기법은 콜백 함수가 무엇일지를 표현하는 방법입니다. 콜백 안에서 참조되는 모든 값은 의존성 값의 배열에 나타나야 합니다.

예제

책에서 다룬 예제는 다음과 같습니다.

import React, { useState, useCallback } from 'react';
...
const TodoInsert = () => {
  const onChange = useCallback(e => {
    setValue(e.target.value);
  },[]);

...
  return(
    <input
    	placeholder="할 일 입력"
    	value={value}
		onChange={onChange}
    />
  );
};

예제 플러스!

useCallback(fn, deps)은 useMemo(() => fn, deps)와 같습니다.