[React] Ref

Ref란?

이름부터가 Reference를 줄인 말인 것처럼 React에서 DOM요소를 참초하기 위한 기능입니다.
Vanilla JS에서는 getElementById를 사용하여 DOM에 접근하는 반면에, 리액트에서는 DOM에 데이터를 Props로 전달합니다. DOM을 수정하려면 다시 Props를 전달하고 재렌더링해야 하는 리액트에서는 Ref를 사용하여 DOM에 접근할 수 있게 하였습니다.

함수형 컴포넌트에서는 useRef() Hook을 사용하여 Reference에 접근하고 current를 사용해서 해당 DOM을 가리킬 수 있습니다.

const DOMRef = useRef();
<DOM ref={DOMRef} /> //이제 DOMRef.current로 해당 DOM에 접근할 수 있다.

ForwardRef

Ref를 사용할 때에는 리액트가 내부적으로 처리하기 때문에 자식 요소에 연결할 수 없다. 왜냐하면 컴포넌트의 내부 구조를 외부에서 알아야 하는 등 불필요한 참조가 일어나기 때문이다.
이럴 때에는 forwardRef 함수를 사용하면 ref 속성값을 직접 처리하게 해주는 것이 좋다.

const TextInput = React.forwardRef((props, ref) => (
  <div> 
  	<input type="text" ref={ref} />
        <button>저장</button>
  </div>
));

function From(){
  //...
  return(
    <div>
    	<TextInput ref={inputRef} />
	<button onClick={()=> inputRef.current.focus()}> 텍스트로 이동 </button>
    </div>
  );
}

위 코드에서는 forwardRef함수를 이용하여 부모 컴포넌트인 TextInput에서 넘어온 ref 속성값을 자식인 input에서 직접 처리할 수 있다.