[React 오류] A component is contentEditable and contains children managed by React

😮 문제 상황

index.js:1 Warning: A component is contentEditable and contains children managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.

 

 

div contentEditable 내부에 component를 넣으니 React 오류 발생

 

아래와 같은 형태

import React, { ReactElement } from "react";

function TestComponent ({children}):ReactElement{

    return (
      <div contentEditable={true} onBlur={this.props.handleBlur}>
        {children}
      </div>
    );

}

 

 

🤔 해결 방법

React는 가상 DOM의 원리로 동작하는데, 

contenteditable은 사용자가 직접 콘텐츠를 설정하고 편집할 수 있도록 허용하기 때문에 React 업데이트 시 문제를 일으킬 수 있다.

 

아래 속성을 활용해서 경고를 수정!

suppressContentEditableWarning={true}

 

 

그러나 좋은 방법은 아니라는 점.

🔗 참고 링크

 

https://stackoverflow.com/questions/49639144/why-does-react-warn-against-an-contenteditable-component-having-children-managed

Why does React warn against an contentEditable component having children managed by React?