React 공식문서 - Writing Markup with JSX(JSX로 마크업 작성하기)

JSX는 JavaScript를 확장한 문법으로, JavaScript 파일 안에 HTML과 유사한 마크업을 작성할 수 있도록 해준다. 컴포넌트를 작성하는 다른 방법도 있지만, 대부분 JSX를 사용한다.

 

JSX: Putting markup into JavaScript(JavaScript에 마크업 넣기)

 

수년동안 웹은 컨텐츠는 HTML로, 디자인은 CSS로, 로직은 JavaScript 작성되어왔고, 각각 분리된 파일에서 관리가 되었다. 하지만 웹이 더욱 인터렉트비해지면서 로직이 컨텐츠를 결정하는 경우가 많아졌고, 이는 React에서 렌더링 로직과 마크업이 같은 위치의 컴포넌트에 함께 있는 이유이다.

 

각 React 컴포넌트는 JSX 구문 확장자를 사용하여 브라우저에 마크업을 렌더링할 수 있는 JavaScript 함수이다.

---

 

The Rules of JSX(JSX 규칙)

 

1. Return a single root element(단일 루트 엘리먼트를 반환하세요)

 

컴포넌트에서 여러 엘리먼트를 반환하려면, 하나의 부모 태그로 감싸야한다. <div></div> 태그 또는 <></>를 사용할 수 있다. <></> 이러한 빈 태그를 Fragment라고 하고 Fragment는 브라우저상의 HTML 트리 구조에서 흔적을 남기지 않고 그룹화를 해준다.

 

* 왜 여러 JSX 태그를 하나로 감싸줘야 할까요?

JSX는 내부적으로는 JavaScript 객체로 변환되며, 하나의 배열로 감싸지 않은 하나의 함수에서는 두 개의 객체를 반환할 수 없기 때문이다.(하나의 배열로 감싸는 함수 - 반환하는 값을 배열로 묶는 경우)

---

2. Close all the tags(모든 태그를 닫으세요)

 

JSX에서는 태그를 명시적으로 닫아야 한다. <img> 태그처럼 자체적으로 닫는 태그도 반드시 <img />로 작성해야 한다.

---

3. camelCase all most of the things!(거의 대부분이 카멜케이스 입니다!)

 

JSX로 작성된 어트리뷰트는 변환된 JavaScript 객체의 키가 된다. JavaScript에서는 변수명에 대시를 포함하거나 class와 같은 예약어를 사용할 수 없는 등 제한이 있기 때문에, React에서 많은 HTML과 SVG 어트리뷰트가 카멜 케이스로 작성된다.

(예를들어 stroke-width 대신 strokeWidth를 사용하고 class 대신 className을 사용한다.)

 

* 'aria-*'와 'data-*'의 어트리뷰트는 HTML과 동일하게 대시를 사용해서 작성한다.

aria- 접두사는 웹 접근성(Web Accessibility)을 위한 HTML 어트리뷰트이며, "aria-"로 시작하는 어트리뷰트는 접근성 관련 정보를 제공하고 웹 페이지의 요소를 스크린 리더나 보조 기술을 사용하는 사용자에게 설명한다.

 

data- 접두사는 HTML 요소에 사용자 정의 데이터를 저장하기 위한 어트리뷰트이며, 이 접두사를 사용하여 "data-" 뒤에 원하는 이름을 지정하고 해당 어트리뷰트에 값을 할당할 수 있다. 이러한 사용자 정의 데이터 어트리뷰트는 JavaScript에서 해당 요소에 접근하고 조작할 때 유용하다.

---

* 참고 : React 공식문서(https://react-ko.dev/learn)