useRef, useImperativeHandle

useRef는 렌더딩에 필요하지 않은 값을 참조할 수 있는 React훅입니다.

useRef(initialValue)

import { useRef } from 'react';

function MyComponent() {
  const intervalRef = useRef(0);
  const inputRef = useRef(null);
  // ...

ref를 사용하면 다음을 보장합니다.

• (렌더링 할 때마다 재설정되는 일반 변수와 달리) 리렌더링 사이에 정보를 저장할 수 있습니다.

• (리렌더링을 촉발하는 state 변수와 달리) 변경해도 리렌더링을 촉발하지 않습니다.

• (정보가 공유되는 외부 변수와 달리) 각각의 컴포넌트에 로컬로 저장됩니다.

렌더링 중에는 ref.current를 쓰거나 읽지마세요.

useImperativeHandle

useImperativeHandle(ref, createHandle, dependencies?)

import { forwardRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  useImperativeHandle(ref, () => {
    return {
      // ... your methods ...
      // ... 메서드는 여기에 작성합니다 ...
    };
  }, []);

• ref : forwardRef 렌더 함수에서 두 번째 인자로 받은 ref입니다.

• createHandle : 인자가 없고 노출하려는 ref 핸들을 반환하는 함수입니다.

• optional dependencies : createHandle 코드 내에서 참조하는 모든 반응형 값을 모든 반응형 값을 나열한 목록입니다.