JSX에서 class오류

react 공부를 하는데 처음 보는 오류가 콘솔에 찍혀있는 것을 발견했다.
절대 못참지…!>_<
곧바로 구글링에 들어갔다. ㅎㅎ

---

Warning: Invalid DOM property `class`. Did you mean `className`?
오류 내용은 바로 이것…!!
JSX는 javaScript이므로 class의 다른 의미가 있다고 한다.
그래서 HTML 태그 속성을 쓸 때는 오류 날 일이 많기 때문에 바꿔서 써줘야 한다.

const favorites = (
  <ul class="favorites">
    {catItem}
    {catItem}
    {catItem}
  </ul>
);
const mainCard = (
  <div class="main-card">
    <img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" alt="고양이" width="400" />
    <button>🤍</button>
  </div>
);

문제가 일어나는 부분은 바로 class 태그이다.
저 부분을 className 로 바꿔주면 바로 문제가 해결된다.

const favorites = (
  <ul className="favorites">
    {catItem}
    {catItem}
    {catItem}
  </ul>
);
const mainCard = (
  <div className="main-card">
    <img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" alt="고양이" width="400" />
    <button>🤍</button>
  </div>
);

이렇게 바꿔주면 곧바로 에러메시지가 없어지는 것을 확인할 수 있다.

예전에는 에러메시지를 보면 짜증이 났었는데,
요즘에는 반갑기도 하다.
내가 자주보는 침착맨 유튜브 안될과학 편에서 과학자 분이 나오셔서 한 말이 있다.
처음부터 성공하는 과학자들은 없으며, 천재라 불리는 이들조차도 수많은 실패 뒤에 성공을 한 것이다.
실패했을 때 절대 실망하지 말고 오히려 기뻐하고 격려하라는 말이었다.
왜냐? 그 과정 속에서 성공하는 법을 배워가는 거니까!
내가 발견하는 오류들도 같은 맥락일 거다.
나는 이 오류들을 통해 몰랐던 것들을 배우는 것이고 성장하는 것이다.
기쁜 마음으로 오류를 맞이하자~ 😎