JSX
리액트에서 지원하는 JSX문법
자바스크립트 파일 안에 html 태그를 사용하는 문법
자바스크립트와 html을 섞어서 쓸 수 있는 자바스크립트의 확장된 문법
- JSX에서는 카멜표기법 사용
- 여러 단어가 조합된 속성에서 카멜표기법 사용
1. 속성명은 카멜 케이스로 작성하기!
JSX 문법에서도 태그에 속성을 지정해 줄 수 있다.
단, 여러 단어가 조합된 몇몇 속성들을 사용할 때는
반드시 카멜 케이스(Camel Case)로 작성해야한다.
ex)
onclick, onblur, onfocus 등과 같은 이벤트 속성이나,
tabindex 같은 속성
이런 속성들은 모두 onClick, onBlur, onFocus, onMouseDown, onMouseOver, tabIndex
2. 자바스크립트 예약어와 같은 속성명은 사용할 수 없다
자바스크립트의 반복문 키워드 for와 겹치기 때문에 htmlFor로,
HTML의 class 속성도 자바스크립트의 클래스 키워드 class와 겹치기 때문에 className으로 작성해 주어야 한다.
Fragment
리액트에서 JSX문법을 활용할 때는
반드시 하나의 태그로 감싸주어야하는데
Fragment 태그로 감싸주면 불필요한 div태그를 줄일 수 있다.
축약된 형태로 사용헤도된다.
root.render( <> <h1>hello</h1> <> );
자바스크립트 표현식 넣기
JSX 문법에서 중괄호({})를 활용하면 자바스크립트 표현식을 넣을 수 있다.
toUppercase() -> 모두 대문자
이렇게 활용할 수 있다.
단, 자바스크립트 표현식만 사용 가능
if문, for문, 함수 선언과 같은 자바스크립트의 문장은 사용 불가
