react) MUI 사용 중 나온 에러 해결하기

 

처음에 해당 오류가 어떤 오류인지 감을 잡지 못해서 태그 확인하는 것보다 각각의 컴포넌트 어디에서 에러가 나는지 상위 부모인 Header에서부터 연관된 컴포넌트를 모두 확인하면서 어떤 부분에서 에러나는지 특정하는 시간이 너무 오래 걸려서 고생했습니다. 그래서 기억에 남기고자 글을 남기게 됐습니다.

1. 에러명  validateDOMNesting(...): cannot appear as a descendant of

A태그안에 A태그

 

2. MUI는 만드는 컴포넌트에 태그를 지정할 수 있다.

import { Link } from 'react-router-dom';
import { Typography } from '@mui/material';

export function Logo() {
  return (
    <Link to="/">
      <Typography
        variant="h6"
        noWrap
        component="a"
        sx={{
          mr: 2,
          fontFamily: 'monospace',
          fontWeight: 700,
          letterSpacing: '.3rem',
          textDecoration: 'none',
        }}
      >
        Name
      </Typography>
    </Link>
  );
}

 

component 속성을 통해서 태그를 지정할 수 있습니다. a 태그로 생성하기 때문에 a 태그의 자식도 a 인 점에서 생성된 warn 에러였습니다.

 

3. 간단하게 해결하기

Typography의 태그 속성은 variant로 h6를 지정하고 있습니다. 그래서 component 속성을 지우니까  정상적으로 태그가 동작합니다!.

import { Link } from 'react-router-dom';
import { Typography } from '@mui/material';

export function Logo() {
  return (
    <Link to="/">
      <Typography
        variant="h6"
        noWrap
        sx={{
          mr: 2,
          fontFamily: 'monospace',
          fontWeight: 700,
          letterSpacing: '.3rem',
          textDecoration: 'none',
        }}
      >
        Name
      </Typography>
    </Link>
  );
}

 

태그가 정상적으로 바뀌었다.!