■ 문제상황
경고는 오류가 아니기 때문에 해결하지 않아도 프로그램 동작에 문제는 없겠지만, 로그를 보기 힘들어서 해결하게 되었습니다. 경고는, <div> 태그가 <p>의 자식으로 존재할 수 없다는 내용입니다.
경고: validateDOMNesting(...): <div>는 <p>의 후손으로 나타날 수 없습니다.
validateDOMNesting()은 아마 DOM의 중첩 구조를 검사하는 함수 같습니다.
로그의 형태를 보면 맨 아래 부분이 부모이고, 맨 윗 부분이 자식요소를 나타내고 있습니다. 위에서부터 p 태그를 찾은 뒤, 바로 위의 컴포넌트가 뭔지 확인해보니, SimSuccessAlert1 컴포넌트가 있습니다. 이 컴포넌트를 p 태그 안에서 부르고 있는 것 같습니다.
■ 해결방법
해당 컴포넌트를 msg라는 상태변수에 넣고 있는데, 그 부분이 p 태그에 둘려쌓여져 있었습니다. 처음에 저 자리에 string을 넣었는데 들여쓰기가 되어져 있지 않아, 수정하지 않고 지나쳤던 것 같습니다.
p태그를 div태그로 변경하고 문제를 해결했습니다.
감사합니다.