[react] useRef Hook 사용하기

1. useRef 설명

useRef는 React의 hook 중 하나로, 컴포넌트 전 생애주기에 걸쳐 지속되는 변경 가능한(ref) 객체를 반환합니다. 이 hook은 DOM 요소에 직접 접근하거나, 렌더링 사이에 지속되어야 하는 값을 유지하는 데 사용됩니다. useRef가 반환하는 객체는 .current 속성을 갖고 있어서 이 속성을 통해 저장된 값을 접근하거나 수정할 수 있습니다.

2. useRef를 사용한 formSubmitRef 선언 및 전달 방법

아래의 예시는, 만일 모달에서 form이 포함되어 있는 컴포넌트를 포함하고 있는 경우, form submit이 모달 내의 폼에서 이루어지지 않고, onConfirm() 함수를 호출하는 시점에서 form submit을 하려고 할 때 어떻게 하지?? 할 때, useRef를 사용하는 방법의 예시입니다:

formSubmitRef는 다음과 같이 선언할 수 있습니다:

// 컴포넌트 내부에서 useRef를 사용하여 formSubmitRef를 선언
const formSubmitRef = useRef<(() => void) | null>(null);

컴포넌트 내에서 이 ref를 formSubmit 함수에 연결하고, 다른 컴포넌트에 전달합니다:

<ModalTestForm formSubmitRef={formSubmitRef} />

3. useRef 사용 시 타입 선언

useRef를 사용할 때 타입을 선언하는 방법은 다음과 같습니다:

const formSubmitRef = useRef<() => void | null>(null);

여기서 () => void는 함수 타입을 나타내며, null은 초기값입니다.

4. RefObject vs MutableRefObject

• RefObject는 .current 속성이 읽기 전용인 ref 객체를 생성합니다. useRef를 사용하여 생성된 ref는 변경이 불가능한 RefObject를 반환합니다.
• MutableRefObject는 .current 속성이 변경 가능하고, 보통 useRef로 생성되지 않습니다. useRef 대신 createRef를 사용하거나, TypeScript 타입을 MutableRefObject로 명시적으로 선언할 때 사용합니다.

5. formSubmitRef 보내는 쪽과 받는 쪽의 변수 및 타입 선언 및 샘플 코드

보내는 쪽:

import React, { useRef } from 'react';
import ModalTestForm from './ModalTestForm';

const ModalTest = () => {
  const formSubmitRef = useRef<(() => void) | null>(null);

  // ... 모달 열기 등의 로직 ...

  return (
    <ModalTestForm formSubmitRef={formSubmitRef} />
    // ... 모달 렌더링 등의 로직 ...
  );
};

export default ModalTest;

받는 쪽 (ModalTestForm):

import React from 'react';

interface ModalTestFormProps {
  formSubmitRef: React.RefObject<() => void>;
}

const ModalTestForm: React.FC<ModalTestFormProps> = ({ formSubmitRef }) => {
  // formSubmit 함수를 정의합니다.
  const handleSubmit = () => {
    // ... 폼 제출 로직 ...
  };

  // formSubmitRef의 current를 handleSubmit으로 설정합니다.
  React.useEffect(() => {
    if (formSubmitRef && formSubmitRef.current === null) {
      formSubmitRef.current = handleSubmit;
    }
  }, [handleSubmit, formSubmitRef]);

  return (
    // ... 폼 컴포넌트 렌더링 ...
  );
};

export default ModalTestForm;

위 코드는 formSubmitRef를 ModalTestForm으로 전달하고, ModalTestForm에서 useEffect를 사용하여 handleSubmit 함수를 ref에 할당하는 방법을 보여줍니다. 이렇게 하면 ModalTest에서 formSubmitRef.current를 호출하여 폼 제출 로직을 실행할 수 있습니다.