Warning: Invalid DOM property `%s`. Did you mean `%s`?%s

에러

리액트 + 테일윈드에서 외부사이트 svg 아이콘을 적용해서 사용하는데 콘솔에서 다음과 같이 에러가 나왔다.

당시 내가 사용했던 svg 아이콘

			<svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth="2"
          	>
            <path
              className="text-purple-300"
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
            />
          	</svg>

해결

react 에서 tailwind를 사용할 때에는 class가 아니라 className으로 사용해야 하는데 확인하지 않고 적용만 하고 지나가버려서 위와 같은 에러가 나왔던 것.
그 외에도 자바스크립트에서의 스네이크 표기법을 따르지 않았을 경우에도

Warning: Invalid DOM property `%s`. Did you mean `%s`?%s

같은 오류가 콘솔에 뜰 수가 있다.
( 예를 들면 stroke-linecap=>strokeLinecap으로 고쳐야 함 )