[Hanaro] 25일차 / React (Hooks- forwardRef)

02 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 <>...</>;
         });