#forwardref

forwardRef 관련

안녕하세요. 질문이 있습니다! 현재 dynamic import 와 forwardRef를 사용하는 과정에서 forwardRef가 적용이 안되는 상황입니다. Canvas 컴포넌트에서는 ref값이 제대로 출력이 되는데 dynamic import와 forwardRef를 사용해 부모 컴포넌트 (DrawingPage)에서 ref값을 콘솔에 찍어보니 전달이 안됩니다. 정보를 찾아보고 수정을 해봐도 오랫동안 제자리 걸음이라 질문남깁니다! 하단은 코드입니다

forwardRef에 대한 회고

안녕하세요 프론트 지망생입니다!!! 다름이 아니라 useRef에 대해서 공부하다가 forwardRef를 알게되어 공부하다가 제가 느낀 것을 블로그로 정리했는데 이게 맞는지 틀린지에 대한 기준이 없어서 forwardRef를 사용함으로써 얻는 이점이 대한 선배님들의 의견을 구하고자 합니다!! 아무쪼록 많이 까 주시면 감사하겠습니다!!🙂🙂💪 useRef -> https://velog.io/@rlwjd31/useRef forwardRef -> https://velog.io/@rlwjd31/forwardRef%EB%8A%94-%EC%99%9C-%EC%93%B8%EA%B9%8C

Next.js의 dynamic import를 이용한 Ref 전달

현재 next.js 13버전과 toast ui calendar를 사용해서 프로젝트를 진행하고있습니다. toast ui calendar는 서버사이드에서는 렌더링이 되지 않기 때문에 dynamic 함수를 사용해서 import를 했습니다. dynamic 함수를 사용해서 import한 component에 ref를 넘기는 방법이 궁금합니다! https://careerly.co.kr/qnas/2078 위의 질문글을 보고 현재 아래 코드와 같이 작성을했는데 이렇게 작성을 하게된다면 결국 TuiCalendar라는 컴포넌트에는 ref={ref}, forwardRef를 사용해서 넘기는것이 아닌 forwardedRef라는 props로 ref를 넘기는형태가 되는건데 dynamic 함수를 사용해서 받아온 컴포넌트에 ref를 넘기는것은 이방법밖에 없을까요? 또한 "use client" import { useRef } from "react"; import Child from "./child"; export default function Parent (props : any) { const testRef = useRef(3) return ( <> <button onClick={() => console.log(testRef.current)}>버튼</button> <Child testRef={testRef} /> </> ) } 이것과 같이 ref를 그냥 props로 넘기는것과 ref + forwardRef 로넘기는 것의 차이점을 알고싶습니다!