JSX가 JavaScript 표현식이 되는 방식

구조 작성

하나의 부모 노드 또는 fragment 아래에 UI 구조를 둔다.

중괄호 안에는 문자열, 숫자, 배열, 조건식 같은 표현식을 넣는다.

if 문은 렌더 전 변수로 계산하고, JSX 안에서는 삼항식이나 &&를 사용한다.

빌드 과정에서 JSX는 React element를 만드는 JavaScript 호출로 바뀐다.

className

CSS class 지정 HTML class 속성과 다르게 JavaScript 예약어 충돌을 피함

camelCase 속성 많음

{}

표현식 삽입 계산된 값, 함수 호출 결과, 배열 렌더링을 넣음

객체 원본은 직접 렌더 불가

Fragment

불필요한 wrapper 제거 DOM 노드를 추가하지 않고 형제 요소를 묶음

key가 필요하면 명시 Fragment

escape

문자열 안전 출력 기본적으로 문자열은 HTML로 실행되지 않음

dangerouslySetInnerHTML은 별도 위험

표현식 JSX 안에 for, if 같은 문을 직접 쓰지 않는다.

속성명 class, for 대신 React 속성명을 사용한다.

렌더값 null, false, 배열 렌더링의 결과를 구분한다.

보안 사용자 HTML을 그대로 삽입하지 않는다.

const label = isSaving ? '저장 중' : '저장';
return <button disabled={isSaving}>{label}</button>;