useImperativeHandle

useImperativeHandle?

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

useImperativeHandle는 forwardRef와 함께 사용한다.

 

useImperativeHandle(ref, createHandle, [deps])

• ref :  프로퍼티를 부여할 ref.
• createHandle : 객체를 리턴하는 함수. 해당 객체에 추가하고 싶은 프로퍼티를 정의하면 됨.

 

예제)

 

부모 컴포넌트

import React, { useState, useRef } from 'react';
import Input from '../UI/Input/Input';

const ParentCompo = (props) => {
  const [inputIsValid, setInputValid] = useState(false)
  const inputRef = useRef()
  
  const inputChngHandler = (event) => {
    if (event.target.value.includes('@')) {
    	setInputValid(true)
    } else {
    	setInputValid(false)
    }
  };

  const submitHandler = (event) => {
    event.preventDefault();
    
    if (!inputIsValid) {
      inputRef.current.focus()
    }
  };

  return (
      <form onSubmit={submitHandler}>
        <Input
          isValid={inputIsValid}
          id='email'
          label='E-Mail'
          type='email'
          onChange={inputChngHandler}
          ref={inputRef}
        />
        
        <Button type="submit"> Login </Button>
      </form>
  );
};

export default ParentCompo;

 

자식 컴포넌트

import React, { useRef, useImperativeHandle } from 'react';

const Input = React.forwardRef((props, ref) => {
    const inputRef = useRef()

    const activate = () => {
        inputRef.current.focus() 
    }

    useImperativeHandle(ref, () => {
        return {
            focus: activate
        }
    })

    return (
       <div>
            <label htmlFor={props.id}>{props.label}</label>
            <input
                ref={inputRef}
                type={props.type}
                id={props.id}
                value={props.value}
                onChange={props.onChange}
            />
        </div>
  );
});

export default Input;

<Input ref={inputRef} />를 렌더링한 부모 컴포넌트는 inputRef.current.focus()를 호출할 수 있다.

 

 

 

참고 자료 :

https://ko.reactjs.org/docs/hooks-reference.html#useimperativehandle

https://developer-alle.tistory.com/372