10. 자살예방웹사이트 - 속성오류

 

이 경고는 React가 인식하지 못하는 isOpen 속성(또는 prop)이 DOM 요소에 전달되었을 때 발생합니다.

React는 커스텀 속성을 자동으로 인식하지 않으며, 컴포넌트에서 사용해야 합니다.

   const NavWrapper = styled.div<{ isOpen: boolean }>`
  /* 스타일과 위치 설정은 필요에 따라 조절하세요. */
  width: 80%;
  height: 100%;
  padding: 20px;
  position: fixed;
  top: 0;
  left: ${({ isOpen }) => (isOpen ? "0" : "-80%")};
  background-color: ${({ theme }) => theme.color.mainWhite};
  transition: left 0.3s ease-in-out;
  z-index: 1000;
`;

<NavWrapper isOpen={isOpen}>

여기가 문제였던 것 같다.
DOM 요소에 사용자 정의 속성을 전달하는 것은 일반적으로 권장되지 않는다고 한다.

   const NavWrapper = styled.div<{ $isOpen: boolean }>`
  left: ${({ $isOpen }) => ($isOpen ? "0" : "-80%")}
`;

<NavWrapper $isOpen={isOpen}>

styled-components에서 $ 기호를 변수 이름 앞에 사용하면 해당 변수를 컴포넌트 속성으로 인식하게 됩니다.

이렇게 하면 styled.div 컴포넌트에서 props.$isOpen으로 접근할 수 있고,

$isOpen은 boolean 값을 나타내며 컴포넌트에서 사용할 수 있게 됩니다.

이렇게 하면 경고가 발생하지 않고 속성이 올바르게 전달됩니다.