Warning: React does not recognize the isMenuOpen prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase ismenuopen instead. If you accidentally passed it from a parent component, remove it from the DOM element.

• prop이 DOM 요소에 전달되었기 때문에 발생한 경고라고 한다..
• React는 DOM 요소에 커스텀 속성을 전달하지 않는 것을 권장하며, {isMenuOpen}라는 prop은 DOM에서 무의미한 속성으로 간주되어 경고가 발생한 경고라고 한다.
• 이 prop이 DOM에 전달되지 않도록 하기 위해서 기존 코드를 수정하니 콘솔창에 경고문이 사라졌다.

DOM이 무엇?

DOM (Document Object Model)은 웹 페이지의 구조를 나타내는 프로그래밍 인터페이스입니다. DOM 요소는 DOM 트리의 각 노드를 나타내며, 웹 페이지의 특정 부분(예: div, button, input)을 가리킵니다.

경고문 발생 원인

React는 DOM 요소를 생성하고 관리하는 라이브러리입니다. React는 컴포넌트로 DOM을 생성하지만, DOM 요소에 전달할 수 있는 속성은 HTML 표준 속성으로 제한됩니다. 사용자 정의 prop을 DOM 요소로 전달하면 React가 이를 감지하고 경고를 발생시킵니다.

prop(속성) 앞에 $ 붙여주기

사용자 정의 prop 무시하는 방법

• CSS-in-JS 라이브러리에서 사용자 정의 prop을 스타일링에만 사용하고 DOM으로 전달되지 않도록 처리하기 위해 $를 사용하는 것

const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);

...

      <styled.NavMenu $isMenuOpen={isMenuOpen}>

• isMenuOpen이라는 prop의 앞에 $를 붙여준다.

마찬가지로 styled에도 적용해준다.

import styled from 'styled-components';

export const NavMenu = styled.nav<{ $isMenuOpen: boolean }>`
  display: ${(props) => (props.$isMenuOpen ? 'block' : 'none')};
  @media (min-width: 768px) {
    display: block;
  }
`;

이제 콘솔 창에 관련 경고문이 사라진 것을 확인할 수 있다..