테일윈드를 찬찬히 적용해보면서 마주친 에러이다. 뭐 바꾸면서 에러난게 아니고 내가 진작에 코드를 잘못 작성한거같은 문제였던것 같다.
https://github.com/aichbauer/styled-bootstrap-components/issues/29
Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>. · Issue #29 · aichbauer/styled-bootstrap
I wrapped a component that is by another component. Essentially a StyledButton within a Button. const StyledButton = styled(Button) Below is Console log
github.com
읽어보니 리액트 자체에서 경고를 주는 에러이고, button이 button을 감싸고 있는 모양새에 대한 경고같다. 왜냐하면 정상적인 HTML은 Button들안에 Button을 감싸지는 않는다. 라고 말씀해주셨다.
SideDrawer 컴포넌트에 버튼을 담아서 넣고 해당 컴포넌트안에서 children으로 들어와서 다른 Button안에 감싸지는 것을 확인 할 수 있다. 자세히보니까 내가 컴포넌트에서 onClick을 받고 있는데, 사실상 props를 통해서 전달하는게 아닌 다른 버튼을 만들어서 해당 함수를 넘겨주는 것을 알 수 있었다.
정신차리고 Button을 없애고 props로 함수를 넘겨주면서 에러를 없앴다.
'Project > MERN' 카테고리의 다른 글
| S3 + Multer를 이용한 Image Upload (0) | 2023.01.11 |
|---|---|
| Google Maps 관련 API 사용기 (0) | 2023.01.10 |
| 에러 - Do not use 'new' for side effects. (0) | 2022.12.22 |
| 에러 - Visible, non-interactive elements with click handlers must have at least one keyboard listener. (1) | 2022.12.20 |
| 에러 - Type null is not assignable to type T.ts(2345) (0) | 2022.12.16 |