리액트 에러 해결: React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

프로젝트 진행을 하다가 에러가 났다.

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

나 같은 경우에는 fontAwesome의 아이콘을 쓰고 있었다. state값에 따라 나타나고 사라지고를 하기 위해

{state && <i></i>}

이런 식으로 사용하고 있었다. 그러자 state 값이 falsy한 값이 되면서 i가 사라져야할 때 해당 에러가 났다. 왜 그런지 생각해보다 span 또는 div 같은 태그들로 i를 감싸주니 해결 됐다. 즉

{state && <span><i></i></span>}

이런 식으로 사용하니 해결 되었다. 내 생각에 i 태그를 리액트에서 node로 인정하지 않는다던지 또는 혼자 사용할 수 없는 태그로 인식하고 있는 것 같다.

stackoverflow를 찾아보니 i태그 뿐 아니라 audio 태그나 embed 태그등에서도 같은 현상이 일어난다고 하니 참고하자.

관련 스택오버플로우1
관련 스택오버플로우2