[React] JSX Attributes 사용하기

JSX Attributes 

class를 --> className 으로 사용하기 

html 태그에서  css로 효과 주고자 할 때 class를 사용해서 class ="header" 를 썼다.

하지만 jsx는 자바스크립트 문법이므로 className을 써줘야 한다. 

 

캐멀 케이스를 사용한다. classname(x) className(o)

 

---

 

html에서 type을 JS -> JSX로 설정으로 바꿔주기 

JSX 내용을 이렇게 작성한 경우 

 

 

className으로 바꿔도 Unexpected token이라는 에러는 뜬다

이 말은 지금 자바스크리트 파일에서 < > 이런 기호를 쓸 일이 없는데

html 태그가 왜 있냐는 것이다. 

 

이 에러를 없애주기 위해 

index.html에서 

여전히 text 파일이지만, js가 아닌 jsx로 바꿔준다. 

className 말고 다른 attribute에 대해서도 알아보자. 

 

 

---

html 에서 쓰는 attributes를 JSX 파일에서도 attribute로 사용할 수 있다. 

대신 캐멀 케이스로 바꿔줘야 한다. 

 

 

jsx에서 쓰는 attribute도 html에서 쓰던 것과 같이 쓴다.

단 class를 className으로 쓴다.

 

 

예시1) html contenteditable attribute 사용하기 

https://www.w3schools.com/tags/ref_standardattributes.asp

 

 

 

현재 브라우저에 있는 글자를 편집 할 수 없지만 

 

html content editable을 true로 설정해 주면 

 

 

 

 

브라우저에 있는 텍스트를 편집할 수 있게 된다. 

 

contentEditable="true"    브라우져에 있는 텍스트 편집 가능

contentEditable="false"   편집 불가능 

 

 

예시2) 크롬 spellCheck 끄기 

여기서 텍스트를 편집하면 크롬 스펠링 체크가 작동이 된다. 

이 기능을 꺼보자 

spellCheck로 써야하는데 잘못썼음 

 

 

스펠링이 틀렸지만 빨간 밑줄이 사라졌다.