오류

• 프로젝트 실행에는 문제 없었지만, 콘솔창을 확인하다가 아래 경고 문구가 떠있는 것을 발견하였다.
  

react-dom.development.js:86 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `MaterialTailwind.MenuList`.
    at NoticeList (http://localhost:3000/static/js/bundle.js:3180:81)
    at div
    at VisualElementHandler (http://localhost:3000/static/js/bundle.js:68075:38)
    at MotionComponent (http://localhost:3000/static/js/bundle.js:68115:20)
    at FloatingFocusManager (http://localhost:3000/static/js/bundle.js:15331:5)
    at PresenceChild (http://localhost:3000/static/js/bundle.js:74891:21)
    at AnimatePresence (http://localhost:3000/static/js/bundle.js:75010:21)
    at FloatingPortal (http://localhost:3000/static/js/bundle.js:15230:5)
    at LazyMotion (http://localhost:3000/static/js/bundle.js:75288:21)
    at http://localhost:3000/static/js/bundle.js:22542:25
    at FloatingNode (http://localhost:3000/static/js/bundle.js:14410:5)
    at MenuContextProvider (http://localhost:3000/static/js/bundle.js:21915:21)
    at http://localhost:3000/static/js/bundle.js:22014:20
    at FloatingTree (http://localhost:3000/static/js/bundle.js:14430:5)
    at http://localhost:3000/static/js/bundle.js:22706:20
    at NoticeBadge (http://localhost:3000/static/js/bundle.js:2800:82)
    at div
    at div
    at div
    at PublicNav (http://localhost:3000/static/js/bundle.js:2091:74)
    at NavBar (http://localhost:3000/static/js/bundle.js:1981:74)
    at Router (http://localhost:3000/static/js/bundle.js:116148:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:114249:5)
    at div
    at App
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:29009:28)

• 부모 컴포넌트에서 자식 컴포넌트의 DOM 요소를 접근할 때는 forwardRef를 사용하여 접근해야 한다는 문구이다.
• 오류 문구에서 MaterialTailwind.MenuList 를 사용하는 과정에서 문제가 발생하였음을 알 수 있었다.
• MaterialTailwind의 Menu UI를 드롭다운처럼 사용하기 위해 아래와 같이 MenuList 안에 컴포넌트를 넣었는데 그러면 안됐나보다 ^^;
  

해결 방법

• 자식 컴포넌트를 forwardRef를 사용하여 생성한다.

import React, { forwardRef } from 'react';


const MyPageDrop = forwardRef(() => {
  ...
  );
});

export default MyPageDrop;

• 부모 컴포넌트에서 ref를 생성하고 prop으로 전달한다.

function SupplierNav() {
  const MyPageRef = React.createRef();

  return (
    <div>
      ...
      <MenuList>
        <MyPageDrop ref={MyPageRef} />
      </MenuList>
      ...
  );
}

export default SupplierNav;

• 이제 콘솔창이 깨끗해졌다 :)
  

References

• https://sambalim.tistory.com/151