목록validateDOMNesting (1)

개발자일지

[ReactJS] DOM 중첩 오류, validateDOMNesting

React 프로젝트를 개발하다 보면 다음과 같은 오류 메세지를 볼 때가 있다. DOM 중첩 오류(DOM nesting error)는 HTML 요소들이 잘못된 계층 구조로 배치되었을 때 발생한다. React에서는 이런 오류를 자동으로 감지해서 경고 메시지를 띄워준다. 이 오류는 작성한 HTML 또는 JSX 구조에서 잘못된 DOM 중첩(DOM nesting)이 발생했다는 뜻이다. 예를 들어 태그 안에 나 같은 블록 요소를 넣는 것은 허용되지 않기 때문에 오류가 나며, 또한 는 반드시 이나 바로 아래에 위치해야 하므로 구조도 잘못된 예에 해당한다. 아래의 코드를 보면 태그는 인라인 요소만 포함할 수 있는데, 는 블록 요소이기 때문에 HTML 문법상 올바르지 않다. 그래서 React는 이를 감지하..
개발 지식모음/ReactJS&TypeScript 2025. 7. 30. 10:44
이전 Prev 1 Next 다음