[HTML+React] contenteditable 속성

contenteditable 속성

html속성 중 해당 요소를 편집할 수 있는지 나타내는 열거형 속성인데,

true면 해당 속성의 값을 편집할 수 있다.

코드펜에서 contentEditable 아래 div요소를 클릭 시 focus되면서 수정이 가능함을 알 수 있다. 

See the Pen Untitled by Yunjin Lee (@sweesweett) on CodePen.

리액트에서 사용 시

contentEditable 속성을 추가했을 시, input처럼 변경사항을  onChange 이벤트 함수로  state로 관리할 수가 없다. 그리고 속성을 추가했을 시 아래와 같은 경고가 뜨게 된다.

이 때 contentEditable을 사용하면서 경고표시를 안나오게 하고싶다면 해당 요소에 

suppressContentEditableWarning={true} 라고 적으면 된다고 한다.

리액트에서 사용할 때 유의할 점은 더 찾아봐야겠다.

 

----

참고 자료

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/contenteditable

contenteditable - HTML: Hypertext Markup Language | MDN

https://ko.legacy.reactjs.org/docs/dom-elements.html#suppresscontenteditablewarning

DOM 엘리먼트 – React