[React] 함수 컴포넌트에 ref를 넘겨주고 싶다면? forwardRef()!

최근 합류한 사이드 프로젝트의 코드를 테스트하던 중 아래와 같은 Warning을 발견했다. Warning: Function components cannot be given refs. Did you mean to use React.forwardRef()? 함수 컴포넌트에는 ref가 존재하지 않는데, forwardRef()를 쓰려고 했던 것이 아니냐는 Warning이었다. 해당 부분 코드를 확인해보니 자식 컴포넌트에 쓰이는 ref를 부모 컴포넌트에서 관리하고 있었다. 대략적인 코드를 보자. // CalendarContainer.jsx (부모 컴포넌트) const CalendarContainer = ({ type }) => { const calendarRef = useRef(null); ... return (..

원문링크 : [React] 함수 컴포넌트에 ref를 넘겨주고 싶다면? forwardRef()!