JSX 문법 작성하는 방법

JSX는 자바스크립트로 html 문법을 사용할 수 있도록 만들어주는 문법이다. 그런데 이 문법을 사용하려면 지켜야 하는 규칙들이 몇가지 있다. 지난 포스팅에서도 이미 설명했지만 그래도 중요한 부분이니 다시 한 번 정리하고 넘어가려고 한다.

 

 

속성명은 무조건 카멜 케이스로 작성

여러 단어가 조합된 속성들을 사용할 때에는 반드시 카멜 케이스로 작성해 주어야 한다.

ex) onClick, onBlur, onFocus, onMouseDown, onMouseOver, tabIndex 

 

예외적으로 "data-" 속성만 카멜 케이스가 아닌 기존 문법 그대로 작성한다. 

ex) data-status

 

자바스크립트 예약어와 같은 속성명 사용불가

자바스크립트 예약어와 겹치는 html 속성명은 쓸 수 없다. 그래서 자바스크립트 반복문 키워드와 겹치는 html의 for과 class는 각각 htmlFor, className 으로 작성해야 한다.

 

<label htmlFor="address">주소</label>
<input id="address" className="address-input" type="text">

 

Fragment로 여러 태그 감싸기

JSX 문법은 여러 태그를 무조건 하나의 요소로 감싸 주어야한다. 의미 없는 <div> 태그의 사용을 줄이기 위해 Fragment를 사용할 수 있다. 축약형을 사용하면 더 편리하다. Fragment 사용법은 아래 링크를 클릭하면 확인이 가능하다.

 

2023.01.08 - [퍼블리싱 & 프론트엔드/React] <div> 대신에 <Fragment>, 프래그먼트 축약형 문법 쓰기

<div> 대신에 <Fragment>, 프래그먼트 축약형 문법 쓰기

 

 

자바스크립트 표현식을 넣을때는 {중괄호} 사용

JSX 문법에서 자바스크립트 표현식을 넣을 때는 중괄호({})를 사용한다. 중괄호 안에서는 문자열을 조합하거나 이벤트 핸들러를 좀 더 쉽게 등록할 수도 있다.

 

다만, 중괄호 안에서 if문이나 for문은 사용할 수 없다. 만약 반드시 조건문이나 반복문이 필요한 경우라면 각각 조건 연산자, 배열의 반복 메소드를 활용하면 된다.