본문 바로가기
퍼블리싱 & 프론트엔드/React

JSX 문법 작성하는 방법

by ♥︎해이나♥︎ 2023. 1. 10.
반응형

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>, 프래그먼트 축약형 문법 쓰기

이번 포스팅에서는 리액트의 Fragment 기능에 대해서 설명하려고 한다. 하나로 감싸진 태그로 작성해야 하는 JSX 리액트에서 JSX 문법을 사용할 때에는 반드시 하나로 감싸진 태그로 작성해야 한다.

heinafantasy.com

 

 

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

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

 

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

반응형

댓글0