2. JSX

JavaScript Syntax Extension

Used to describe & create HTML elements in JavaScript in a declarative way

• JavaScript 함수에 HTML이 있는것 처럼 보인다.
• 비표준의 자바스크립트 문법을 사용한다.
• 자바스크립트 내에 HTML을 생성하고 요소를 설명, 생성 할 수 있게 함
• 브라우저에서는 사용 불가

JSX와 React는 서로 다른 별개의 개념
종종 함께 사용되기도 하지만 독립적으로 사용할 수 있다.
JSX는 확장된 문법이고, React는 JavaScript 라이브러리입니다.

React projects come with a build process that transfomrs JSX code(behind the scenes) to code that does work in browsers

React Components = Function

Component Functions Must Follow Two Rules

1. Name starts With Uppercase Character

• the function name must start with an uppercase character
• Multi-word names should be written in PascalCase (e.g., "MyHeader")
• It's recommended to pick a name that describes the building blocks

2. Returns Renderable Contents

• The function must return a value that can be rendered by React
• In most cases : Return JSX
• Also allowed: string, number, boolean, null, array of allowed values

JSX 작성규칙

1. 하나의 루트 엘리먼트로 반환하기

• 한 컴포넌트에서 여러 엘리먼트를 반환하려면, 하나의 부모 태그로 감싸기

2. 모든 태그는 닫아주기

• JSX에서는 태그를 명시적으로 닫아야 한다.
• <img>처럼 자체적으로 닫아주는 태그는 반드시 <img /> 형태로 작성해야 함
• <li>oranges와 같은 래핑 태그도 <li>oranges</li> 형태로 작성해야 함

3. 거의 대부분 캐멀 케이스로!

• JSX는 JavaScript로 바뀌고 JSX에서 작성된 어트리뷰트는 JavaScript 객체의 키가 됨
• 컴포넌트에서는 종종 어트리뷰트를 변수로 읽고 싶은 경우가 있다.
  ⏩ 그러나 JavaScript는 변수명에 제한이 있음
  ⏩ 변수명에 대시를 포함하거나 class처럼 예약어를 사용할 수 없습니다.

❗ 이것이 바로 React에서 HTML과 SVG의 어트리뷰트 대부분이 캐멀 케이스로 작성되는 이유입니다.
예를 들어,

• stroke-width 대신 strokeWidth로 사용
• class는 예약어이기 때문에, React에서는 DOM의 프로퍼티의 이름을 따서 className으로 대신 작성

API 레퍼런스 참조