React.js " Invalid DOM property " 오류 해결법

오류 내용

---

 

 

 

---

 

React.js 이나 Next.js 환경에서 프로젝트를 운영해보면 콘솔장에서  " Invalid DOM property ... " 오류 뜨는것을 확인할 수 있습니다. 아무 문제 없이 잘 돌아가긴 하지만 왠지 깔끔한 느낌이 안 들어서 간단한 방법으로 이런 오류 안 뜨게 하는 법을 기록해봤습니다. 

정확한 오류 내용을 다음과 같습니다:

hydration-error-info.js:27 

Warning: Invalid DOM property `stroke-linecap`.
Did you mean `strokeLinecap`?

hydration-error-info.js:27 

Warning: Invalid DOM property `stroke-linejoin`.
Did you mean `strokeLinejoin`?

hydration-error-info.js:27 Warning: 

Invalid DOM property `stroke-width`. 
Did you mean `strokeWidth`?

hydration-error-info.js:27 Warning: 

Warning: Invalid DOM property 'stop-opacity'. 
Did you mean 'stopOpacity'?

 

 

---

 

오류 뜨는 이유, 해결법

---

먼저 React에서  'class' 아니라  'className' 을 사용하는 이유는 JSX 문법이 HTML과 유사하게 작성될 수 있도록 하기 위해서입니다.

HTML에서 class는 요소의 클래스를 정의하는데 사용됩니다. 그러나 JavaScript에서 class는 클래스 선언을 정의하는데 사용됩니다. React에서는 JavaScript와 HTML을 결합하므로 class를 사용하면 충돌이 발생할 수 있습니다.

React에서 class 대신 className을 사용하여 요소의 클래스를 정의합니다. 이는 JSX 코드에서 HTML과 유사한 문법을 사용할 수 있도록 하고, 동시에 JavaScript 클래스와의 충돌을 방지합니다.

 

 

따라서 오류 뜨는 이유는 사용하는 SVG 아이콘을 살펴보면 ' stroke-width="1.5" ' 이란 부분이 있으며 오류 뜨는 이유는 SVG 아이콘이 JSX 문법으로 맞지 않아서 뜨기 때문입니다. 이유를 알았으니 해결방번을 일단 HTML 보다 JSX 문법으로 맞쳐서 수정하면 해결됩니다. 

fill-rule => fillRule

stroke-width => strokeWidth

stop-color => stopColor

stop-opacity => stopOpacity

stroke -linecap => strokeLinecap

 

---