[react] forwardRef 사용해보기

언제 쓰는 거냐?

 

자식 컴포넌트의 태그에 ref 를 사용하고 싶을때 (=부모컴포넌트에서 자식의 돔엘리먼트를 다루고 싶을때)

 

예를 들어보자면은 

 

내가 input 에 처음들어갓을때 focus 를 주고 싶어서 

useref 를 이용해서 inputRef 를 만들고 useEffect 에서 처음에 inputRef.current.focus() 를 해줘서 돔 엘리먼트를 조작해준다고 하자

위와 같은 상황에서는 forwardRef 가 필요가 없지만

 

만약에 input 이 그냥 태그가 아니라 CustomInput 이라는 커스텀된 컴포넌트 안에 있다라면은

우리는 해당페이지 초기화면에서 돔엘리먼트를 조작하려면 자식컴포넌트의 input 태그의 inputRef 를 상위컴포넌트에서 다룰수 있어야 한다.

 

const Parent= () => {
	const inputRef = useRef(null)
    const childInputRef = useRef(null)
    
    // 예시를 위해서 포커스 각각 해놓음
    useEffect(() => { 
    	inputRef.current.focus();
        childInputRef.current.focus();   
    },[])
    
	return (
    	<div>
       	  <span>title</span>
          <input type="text" ref={inputRef} />
          <CustomInput ref={childInputRef}???/> 
          //이렇게 사용하려면 CustomInput에 forwardRef로 래핑을 해줘야댐
        </div>
    )
}

// typescript 쓴다고 가정했을때
interface Props {
	...
}

// ref 전달 안할때
const CustomInput : React.FC<Props> = ({ id, label }) => {
	return (
    	<div>
          <label>{label}<label/>
          <input type="text"/>
        </div>
    )
}

// ref 전달 할때 
// forwardRef(( ) => { })
import { forwardRef } from 'react';

const CustomInput = forwardRef<HTMLInputElement, Props>(({id, label}, ref) => {
	return (
    	<div>
          <label>{label}<label/>
          <input type="text" ref={ref}/>
        </div>
    )
});

 

무튼 결론은 상위컴포넌트에서 하위컴포넌트안의 dom element 에 접근하고 싶을때 하위컴포넌트에 forwardRef 를 이용해서 ref를 전달해줄수 있고 하위컴포넌트 내의 element 에 ref를 붙여주면 상위컴포넌트에서 접근할수있다.