TIL_200923(React Hook API)

 

useCallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

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

 

인라인 콜백과 그것의 의존성 값의 배열을 전달하면 useCallback은 콜백의 메모이제이션된 버전을 반환합니다. 메모이제이션된 버전은 콜백의 의존성이 변경되었을 때에만 변경됩니다. 

 

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

 

 

 

useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

메모이제이션된 값을 반환합니다.

 

생성(create) 함수와 그것의 의존성 값의 배열을 전달합니다. useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산 합니다. 이 최적화는 모든 렌더링 시의 고비용 계산을 방지해줍니다. 

useMemo로 전달된 함수는 렌더링 중에 실행됩니다. 그러므로 렌더링 중에 하지 않을 것을 이 함수 내에서 하지 마세요. 

배열이 없는 경우 매 렌더링 때마다 새 값을 계산합니다.

메모이제이션된 값들의 일부를 잊어버리고 다음 렌더링 시에 재계산하는 방법을 선택할 수 있을 것입니다.

 

 

useRef

const refContainer = useRef(initialValue);

 

useRef는 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를  .current 프로퍼티에 반환합니다.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자와 같습니다.

DOM에 접근하는 방법으로 refs가 친숙할 지도 모르지만 <div ref={myRef} />를 사용하여 React로 ref 객체를 전달한다면, React는 모드가 변경될 때마다 DOM 노드에 .current 프로퍼티를 설정할 것입니다.

 

useRef()는 순수 자바스크립트 객체를 생성하기 때문에 어떤 가변값을 유지하는 데에 편리합니다. 

useRef()와 {current: ...} 객체 자체를 생성하는 것의 유일한 차이점은 useRef() 는 매번 렌더링을 할 때 동일한 ref 객체를 제공하는 것 입니다. 또한 .current 프로퍼티를 변형하는 것이 리렌더링을 발생시키지 않습니다. 

 

 

 

useImperativeHandle

useImperativeHandle(ref, createHandle, [deps])

useImperativeHandle은 ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자화합니다.

useImperativeHandle는 forwardRef와 같이 사용합니다.

 

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);