[React] missing in props validation 에러

에러

Header.js -> Category.js props를 넘겨주기

const Header = () => {
  const [isMenuIcon, setIsMenuIcon] = useState(false);

  const menuDropdown = () => {
    setIsMenuIcon((prevState) => !prevState);
  };
  
  .
  .
  .
  
  return (
    
    .
    .
    .
          {isMenuIcon && (
            <div ref={dropdownRef}>
              <Category setIsMenuIcon={setIsMenuIcon} />
            </div>

              .
              .
              .

useState를 사용해서 Header.js에 상태를 만들고 카테고리에서도 버튼을 클릭하면 닫힐 수 있도록 상태를 보내주려는 계획!

빨간 줄이 생기고... 작동은 잘하지만 해당 에러가 발생... 🫠

정상적으로 props를 받아오고, 작동도 잘 되고있는데...🫠

이게 안된다고...?

해결방법

멘붕에 구글링을하다가 GPT 출동..

GPT + 구글링 기반으로 해결방법을 모색 중에 해당 방법으로 해결하신 분들이 많아서 도전..!

npm 설치

npm install prop-types

원하는 컴포넌트에 import

import PropTypes from 'prop-types';

• 헤더에서 받아오니깐, 카테고리에 import 해줌!

props를 타입 정의

Category.propTypes = {
    setIsMenuIcon: PropTypes.func.isRequired,
  };

• 빨간줄이 뜨는 바로 아래에 작성!

해결

더이상 에러도 발생하지 않고 원하던 상태도 정상 작동!