React - React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node 에러

FontAwesome 아이콘을 사용하기 위해 i태그에 해당하는 아이콘 클래스이름을 넣은 후, 페이지를 실행하였을 때, 다음과 같은 에러가 발생하였다.

 

React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

 

<>
  <span>test</span>
  <span>
    <i className="fas fa-redo" />
  </span>
</>

i태그를 위와 같이 사용하였을 때, 에러가 발생하였다.

 

 

해결법 : div, span태그로 하위 태그를 감싸준다.

<span>
  <span>test</span>
  <span>
    <i className="fas fa-redo" />
  </span>
</span>

// span 또는 div 등의 다른 태그로 감싸주면 에러가 해결된다.

<div>
  <span>test</span>
  <span>
    <i className="fas fa-redo" />
  </span>
</div>

위의 소스코드처럼 span태그 또는 div 태그로 해당 내용들을 감싸주면 에러가 해결된다.

 

---

노드 패키지 매니저로 FontAwesome 패키지를 설치하고 사용하는법

https://fontawesome.com/v5/docs/web/use-with/react

React

---

 

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node - 에러 관련 참조글

https://stackoverflow.com/questions/48358529/failed-to-execute-removechild-on-node-with-fontawesome-in-react

Failed to execute 'removeChild' on 'Node' with FontAwesome in React