forwardRef 사용법 | 여러개 Ref props로 전달하기

https://ko.reactjs.org/

ref를 사용하다보면 부모 컴포넌트로부터 하위 컴포넌트 내부로 ref를 전달해야 하는 상황이 생기는데, 함수 컴포넌트에 props로 ref를 보내면 함수 컴포넌트에는 인스턴스가 없기 때문에 참조값이 null이 나오게 된다.

이처럼 ref는 DOM노드, 엘리먼트 접근이라는 특수한 용도로 사용하기 때문에 일반적인 prop를 보내는 것 처럼 사용할 수 없다.

이럴 때 React에서 제공하는 forwardRef() 를 사용할 수 있다.

---

forwardRef 사용 예시

1. App.js 에서 생성 한headerRef를 하위 컴포넌트인 Header 컴포넌트로 전달한다.

function App() {

const headerRef =  useRef(null); 


return (
  <>
      <Header ref={headerRef}/> 
      <Footer/>
  </>
}

2. Header 컴포넌트에서 forwardRef() 함수의 두번째 매개변수를 통해 ref를 prop로 받는다. 이렇게 전달 받은 ref를 HTML 요소의 속성으로 넘겨줌으로써 하위 컴포넌트에서도 ref를 통한 제어가 가능해진다.

const Header = forwardRef(({...props}, headerRef) => {
  return (
    <HeaderContainer ref={headerRef}>
		<HeaderWrapper>
        	<Logo />
        </HeaderWrapper>
    </HeaderContainer>
  );
});

또는 이렇게 사용할 수도 있다.

const Header = ({...props}, headerRef) {
  return (
    <HeaderContainer ref={headerRef}>
		<HeaderWrapper>
        	<Logo />
        </HeaderWrapper>
    </HeaderContainer>
  );
};

export deafult forwardRef(Header);

---

여러개의 ref를 전달해야하는 상황에서는 다음과 같은 방법을 사용할 수 있다.

여러개의 ref를 전달하는 경우

1. 객체형태의 ref를 만든 후 해당 ref 객체를 전달한다.

function App() {

 const refs = {
   headerRef: useRef(null),
   topHeaderRef: useRef(null),
 };
  
return (
  <>
      <Header ref={refs}/> 
      <Footer/>
  </>
}

2. Header 컴포넌트에서 forwardRef() 함수의 두번째 매개변수를 통해 ref 객체를 prop로 받은 후 구조 분해 할당과 같은 방법으로 속성을 해체하여 사용할 수 있다.

const Header = forwardRef(({ ...props }, refs) => {
  const { headerRef, topHeaderRef } = refs;
  return (
    <HeaderContainer ref={headerRef}>
		<HeaderWrapper ref={topHeaderRef}>
        	<Logo />
        </HeaderWrapper>
    </HeaderContainer>
  );
});