[React.js] forwardRef And useImperativeHandle

- forwardRef

 

1. 함수형 컴포넌트에서 사용

2. ref 전달 ( 부모 컴포넌트 -> 자식 컴포넌트 )

 

ex) 

 

import React, { forwardRef } from 'react';

const MyComponent = forwardRef((props, ref) => {
  return <input type="text" ref={ref} />;
});

export default MyComponent;

 

=============================================

 

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

function ParentComponent() {
  const inputRef = useRef(null);

  return (
    <div>
      <MyComponent ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus Input</button>
    </div>
  );
}

export default ParentComponent;

 

- useImperativeHandle

1. 함수형 컴포넌트에서 사용하는 React Hook

2. ref 를 사용하여 자식 컴포넌트 인스턴스에 접근 / 제어

3. 부모 컴포넌트에서 자식컴포넌트의 메소드, 속성 직접 호출 시 사용

 

 

ex ) 

 

import React, { forwardRef, useImperativeHandle, useState } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  const [name, setName] = useState('');

  // 부모 컴포넌트에서 호출할 메서드를 useImperativeHandle로 노출시킵니다.
  useImperativeHandle(ref, () => ({
    changeName(newName) {
      setName(newName);
    }
  }));

  return (
    <div>
      <p>Child Component</p>
      <p>Name: {name}</p>
    </div>
  );
});

export default ChildComponent;

===========================================

 

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

function ParentComponent() {
  const childRef = useRef(null);

  function handleChangeName() {
    if (childRef.current) {
      childRef.current.changeName('John');
    }
  }

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleChangeName}>Change Name</button>
    </div>
  );
}

export default ParentComponent;