[알게된 것] React forwardRef

Chobby·2023년 3월 29일
1

알게된 것

목록 보기
7/48

React 작업을 진행하며, 자식 컴포넌트에서 사용될 ref를 부모 컴포넌트에서 선언해야 하는 구조였다.

const ref = useRef("")

<Component ref={ref} />

위와 같은 구조로 ref를 전달하니 에러가 발생했고...

찾아보니 자식 컴포넌트에 ref를 전달하려면 컴포넌트를 선언할 때 React.forwardRef를 사용해야한다는 답변을 받았다.

const Component = React.forwardRef(
  (
    { props들 }: PropType,
    ref: ForwardedRef<Ref Type>
  ) => (
    <사용될 컴포넌트 내용>
  )
);

위와 같은 구조로 선언하니 정상적으로 ref를 사용할 수 있었으며, TypeScript를 사용하지 않는다면, Type부분만 제거하면 된다.

해결완료!

profile
내 지식을 공유할 수 있는 대담함

0개의 댓글