[React] React Hooks - forwardRef

React Hooks - forwardRef

• forwardRef란
  • useRef로 부모 컴포넌트에서 외부(자식) 컴포넌트의 DOM 접근할 때 사용
  • 부모에서 선언→ 자신에게 전달→ 자식에서 참조걸기→ 부모에서 컨트롤
• import
  • import { forwardRef, useRef } from ‘react’;
• 사용 예시
  • App.js에서 const 변수명1 = useRef(); 생성
  • 하위 컴포넌트인 Header 컴포넌트로 전달 <Header ref={변수명1}/>
  • Header 컴포넌트에서 const 변수명2 = forwardRef((props, 변수명1) ⇒ { … } ); 생성
  • 그 외 사용 예시

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

• useImperativeHandle (with forwardRef)
  • 사용 예시
    • 부모 컴포넌트에서 useRef()를 선언하고 자식 컴포넌트에 보낸다. (해당 useRef return)
    • forwardRef() 선언 시 부모 컴포넌트에서 사용할 함수를 useImperativeHandle()로 감싼다.
    • 부모 컴포넌트에서 current로 함수 사용
  • 그 외 사용 예시

    • const ChildComponent = forwardRef( (_, ref) => {
         …
         const handler = {
           fn: () => setState(...),
         };
         useImperativeHandle(ref, () => handler);
         return <>...</>;
       });