JSX란 무엇인가 - HTML인듯 HTML아닌 JSX

💡 JavaScript에서 class는 ES6 클래스 문법의 예약어이므로, JSX에서는 className을 사용합니다. JSX는 HTML처럼 보이지만 결국 JavaScript 코드이기 때문에 JavaScript의 규칙을 따릅니다.

💡 JSX에서 인라인 스타일은 JavaScript 객체로 작성해야 합니다. 바깥 {}는 JSX에서 JavaScript 표현식을 나타내고, 안쪽 {}는 객체 리터럴입니다. 속성명은 camelCase(fontSize, backgroundColor 등)를 사용합니다.

💡 JSX 컴포넌트는 반드시 하나의 루트 요소를 반환해야 합니다. 여러 요소를 반환하고 싶을 때는 div나 Fragment(<>...</>)로 감싸야 합니다. Fragment를 사용하면 불필요한 DOM 요소 없이 여러 요소를 묶을 수 있습니다.

💡 count가 0(falsy)일 때, React는 && 연산자의 왼쪽 값인 0을 화면에 렌더링합니다. 숫자 0은 falsy이지만 React가 렌더링 가능한 값으로 처리하기 때문입니다. 이를 방지하려면 {count > 0 && <span>항목 있음</span>} 또는 {!!count && <span>항목 있음</span>}으로 작성해야 합니다.

💡 JSX의 {} 안에는 값을 반환하는 표현식(Expression)만 사용할 수 있습니다. if, for, while 같은 구문(Statement)은 값을 반환하지 않으므로 {} 안에 직접 사용할 수 없습니다. 조건부 렌더링에는 삼항 연산자나 && 연산자를 사용합니다.