[React]ref 와 forwardRef

forwardRef란?

React 컴포넌트에서의 ref 사용이 필요해서 내부 ref 엘리먼트에 접근하게 해주는 함수입니다.

 

사용하게 된 계기?

ref를 사용하게 된 이유는 웹에서의 채팅 메시지 박스를 만들어야 하는 상황에서 사용자가 상단의 이전 메시지를 보는 상황에서 새로운 메시지가 나타났을 경우 스크롤 이벤트를 얻기위해서 ref가 필요한 상황이 있었습니다.

 

먼저 ref에 대해서 알아보자면 HTML Element의 레퍼런스를 변수에 저장하기 위해 사용됩니다. 다른말로 리액트에서 DOM에 이름을 달아주는 방법이라고 합니다. ref를 이용해 DOM API를 다룰수 있고 주로 사용되는 상황에서는 input 포커스, 오디오 파일 재생, Canvas 그림 제어, 스크롤 제어가 있다고 합니다.

 

클래스형과 함수형 컴포넌트에서의 ref사용법이 다른것같은데 저는 함수형 컴포넌트에 대해서 설명할려고합니다.

 

* 클래스형 - createRef()

함수형에서 ref는 주로 useRef hook을 사용하는데  useRef에서 React API를 통해서 current 속성을 가지게 되고 그 현재 상태의 엘리먼트 상태를 가져오는것 같습니다.

ForwardRef를 쓰게 된 이유?

 

타입스크립트에서 useRef를 가지고 하단 컴포넌트로 ref를 전달하는상황에서 타입이 맞지않게 되고 정상적으로 동작이 하지 않는경우가 생겼습니다. 그리고 채팅박스의 경우 동일한 컴포넌트를 여러번 렌더링하게 되고 일반적인 props으로 전달하게 되는데 이러면 정상적인 방법이 아니라 생각되었고 제대로 사용할수 없게 됬습니다. 그래서 ForwardRef를 통해서 컴포넌트를 감싸주게 되면 외부에서 ref prop를 넘길수 있게 됩니다.

 

예시 코드

 

const GroupChatScroll = forwardRef<HTMLDivElement, Props>(YourProps, ref) => {
	return <Scroll ref={ref}>
            ...
           </Scroll>
})