jsx rules

JSX 표현식 해석

JSX를 안정적으로 쓰려면 태그 닫기, 하나의 부모, className, 중괄호 표현식 규칙을 한 묶음으로 기억해야 합니다.

태그 규칙

모든 태그를 닫고 여러 요소는 하나의 부모나 Fragment로 감싸야 합니다.

속성 이름

HTML의 class는 JSX에서 className으로 쓰며 이벤트 이름도 camelCase를 사용합니다.

표현식 자리

중괄호 안에는 변수, 함수 호출, 삼항 연산자처럼 값을 만드는 표현식이 들어갑니다.

wrap

반환되는 JSX가 하나의 루트로 묶였는지 확인한다.

close

img, input 같은 태그도 닫힘 처리가 되었는지 본다.

name

className과 htmlFor처럼 React 속성명을 사용한다.

value

중괄호 안에 문장이 아니라 값 표현식이 있는지 확인한다.