처음에 해당 오류가 어떤 오류인지 감을 잡지 못해서 태그 확인하는 것보다 각각의 컴포넌트 어디에서 에러가 나는지 상위 부모인 Header에서부터 연관된 컴포넌트를 모두 확인하면서 어떤 부분에서 에러나는지 특정하는 시간이 너무 오래 걸려서 고생했습니다. 그래서 기억에 남기고자 글을 남기게 됐습니다.1. 에러명  validateDOMNesting(...): cannot appear as a descendant of 2. MUI는 만드는 컴포넌트에 태그를 지정할 수 있다.import { Link } from 'react-router-dom';import { Typography } from '@mui/material';export function Logo() { return ( ..

JSX의 특징 REACT에서 UI를 렌더할 때 사용합니다. 문자열 리터럴이 사용 가능합니다. JSX Element를 자식으로 넘겨줄 수 있습니다. React DOM에서 렌더링하기 이전에 이스케이프가 일어나 XXS 공격을 방지 가능합니다. 컴포넌트의 재사용으로 유지보수가 용이합니다. react에서 마치 html 코드를 js에서 사용할 수 있도록 만들어줍니다. JSX의 문법의 변환 return ( JSX Start ); 위의 HTML 코드처럼 보이는 JSX 문법을 자동으로 JavaScript 코드로 변환된다. JSX 문법을 사용하지 않는 경우는 다음과 같다. return React.createElement( 'div', {}, React.createElement('h2',{},"JSX Start"), Rea..