[Error Note] Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p> 해결 _ React Error

React로 작업하던 중 에러를 마주쳤습니다.

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

해당 에러는 <div> 태그 안에 <p>태그를 혹은, <p>태그 안에 <p>태그를 사용했다는 에러입니다.

동작을 작동하는 데에는 문제가 없지만, console 창에서 빨간 에러창이 뜨면 신경쓰이잖아요?
그래서 해결하고자 했습니다.

이 에러같은 경우 리액트로 개발할 때 사용하는 jsx파일에서 발생합니다.

콘솔 창을 열어봤을 때는 태그 안에 <p>태그를 사용했다는 에러가 보이긴 하는데..

주로 저는 <p>태그를 사용하지 않기도 하고, 혹시라도 사용해서 에러가 생겼나 싶어서 제가 작성한 코드를 아무리 찾아봐도 <p>태그는 보이지 않았습니다.

그래서 요소를 찾아보니,

총 두 곳에서 발견할 수 있었습니다.

리액트로 개발하면서 MUI UI Tool을 활용했는데, MUI 내에 있는 기본 component가 <p>태그로 된 것을 확인할 수 있었습니다.

아마도 제가 웹 페이지를 개발하면서 MUI <TabPanel> 태그 내 <MaterialReactTable>을 사용해서 생기는 에러라고 생각했습니다.
그래서 찾아낸 해결방안은.

1. <MaterialReactTable>을 <TabPanel>태그 밖으로 빼서 사용하기

return(
        <div className="category">
            <MaterialReactTable />
        </div>
)

2. <p>태그의 component를 <div>태그 등의 다른 태그로 바꿔 사용하기 

 <DialogContentText component={'div'}/>

3. <TabPanel>를 함수화 시켜 <div>의 role을 변경하여 사용하기 

function TabPanel(props) {
    const {children, value, index, classes, ...other} = props;

    return (
        <div
            role="tabpanel"
            hidden={value !== index}
            id={`simple-tabpanel-${index}`}
            aria-labelledby={`simple-tab-${index}`}
            {...other}
        >
            {value === index && (
                <Container>
                    <Box>   // <== P TAG REMOVED
                        {children}
                    </Box>
                </Container>
            )}
        </div>
    );
}