[리액트 오류] - Warning: Invalid DOM property `class`. Did you mean `className`

개발자 툴에 Warning: Invalid DOM property `class`. Did you mean `className` 오류가 떠버렸다.

찾아보니 말 그대로 너가 쓴 class, className 의미하는거니? 라는 뜻이었고 코드를 살펴보니 JSX에서 class로 써버렸다. JS에서는 class로 작성하지만 JSX에서는 className으로 작성해야한다. 의미는 같지만 표기하는 법이 다르기에 꼭 유의해야한다. 안 그러면 위처럼 오류가 뜨기 때문이다. 

오류 해결법은  class  —> className으로 바꾸면 된다. 

근데 하나하나 바꾸면 시간도 걸리고 귀찮다. 한번에 바꾸는 법을 알아보자!

ctrl + f 를 누르면 위 창이 나온다. 맨 왼쪽 화살표를 클릭하면 두개의 input창이 생긴다.

위에선 단어 선택을 아래는 뭐라고 바꿀 것인지 적고 replace all를 의미하는 빨간 동그라미를 친 아이콘을 누르면 된다!

 

그러면 class인 단어들이 className으로 바뀌고 개발자 툴에 있던 오류가 사라진 걸 확인 할 수 있다.