[ NextJS ] Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

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

next.js에서 내용을 불러오고 제거하는 과정에서 오류가 발생했습니다.



App.jsx

...


const App = () => {
    
    const [test, setTest] = useState([]);
    
    useEffect(() => {
        setTest([
            {hello: 1},
            {hello2: 2},
            {hello3: 3},
        ])
    }, [])
    return (
        <div>
            {
                test.length > 0 && test.map(item => (
                    <div></div>
                ))
            }
        </div>
    )
}

export default App;

예를 들어, 위와 같은 내용이 있을 때 안에 내용을 지워줄 때 제대로 지워지지 않았습니다.

내용이 완전히 삭제되지 않고 [{"": 0}] 이런 식으로 데이터가 남아버리는 상태가 되었는데 데이터가 제대로 지워지지 않았기에 <div></div> 이곳에서 에러가 발생하게 됐습니다.

( 실제 코드에서는 useMemo에서 test내용이 바뀔때마다 실행이 되는 바람에 [{"": 0}] 이런 식으로 배열이 생기게 됐었습니다. )

 

그래서 test 내용을 깨끗이 비워줄 수 있도록 처리를 하고 해결을 했습니다.

( useMemo에서 불러올 내용이 없으면 setTest([])를 만들어 줘서 해결했습니다. )