Chapter 1. Describing the UI

#3 JSX로 마크업 작성하기

학습 목차

1. JavaScript에 마크업 넣기
2. JSX 규칙

---

• JSX는 JavaScript를 확장한 문법으로, JavaScript 파일 안에 HTML과 유사한 마크업을 작성할 수 있도록 해준다.
• component를 작성하는 다른 방법도 있지만, 대부분의 React개발자는 JSX의 간결함을 선호하며 대부분의 코드베이스에서 JSX를 사용한다.

1. JavaScript에 마크업 넣기

1-1. component import 및 export하기

• 웹은 HTML, CSS, JavaScript를 기반으로 만들어졌다.
• 보통은 각각 분리된 파일로 관리를 한다.
• 페이지의 로직이 JavaScript안에서 분리되어 동작하는 동안, HTML 안에서는 컨텐츠가 마크업 되어있다.
• React에서 렌더링 로직과 마크업이 같은 위치의 컴포넌트에 함께 있는 이유는 로직이 컨텐츠를 결정하는 경우가 많아져 JavaScript가 HTML을 담당하게 되어서이다.
• 버튼의 렌더링 로직과 마크업이 함께 존재한다면 모든 편집에서 서로 동기화 상태를 유지할 수 있다.
  반대로 버튼의 마크업과 사이드바의 마크업처럼 서로 관련이 없는 항목들은 서로 분리되어 있으므로 각각 개별적으로 변경하는 것이 더 안전하다.
• 각 React 컴포넌트는 React가 브라우저에 마크업을 렌더링할 수 있는 JavaScript 함수이다.
• React 컴포넌트는 JSX라는 구문 확장자를 사용하여 해당되는 마크업을 표현한다.
• JSX는 HTML과 비슷해보이지만 조금 더 엄격하며 동적으로 정보를 표시할 수 있다.
• JSX를 이해하는 가장 좋은 방법은 일부의 HTML마크업을 JSX마크업으로 변환해보는 것이다.

KeyNote

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

2. JSX 규칙

2-1. 단일 루트 엘리먼트를 반환

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

2-2. 모든 태그 닫기

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

2-3. 거의 대부분이 카멜 케이스

• JSX는 JavaScript로 바뀌고 JSX로 작성된 어트리뷰트는 JavaScript 객체의 키가 된다.
  종종 컴포넌트 안에서 어트리뷰트를 변수로 읽는 경우가 있다.
  하지만 JavaScript에는 변수명에 제한이 있다.
  • 예를 들어, 변수명에는 대시를 포함하거나 class처럼 예약어를 사용할 수 없다.
• 이것이 React에서 많은 HTML과 SVG 어트리뷰트가 캐멀 케이스로 작성되는 이유이다.
  • 예를 들어, stroke-width 대신 strokeWidth을 사용합니다.
• class는 예약어이므로, React에서는 대신 해당 DOM 속성의 이름을 따서 className을 쓴다.
• 이런 모든 어트리뷰트는 React DOM엘리먼트에서 찾을 수 있다.
  틀려도 React는 브라우저 콘솔에서 수정 가능한 부분을 메세지로 알려준다.

주의
역사적인 이유로 aria-* 과 data-*의 어트리뷰트는 HTML에서와 동일하게 대시를 사용하여 작성한다.

Tip! JSX 변환기 사용

• 기존 마크업에서 모든 어트리뷰트를 변환하는 것은 지루할 수 있다.
• 변환기를 사용하여 기존 HTML과 SVG를 JSX로 변환하는 것을 추천한다.
• 변환기는 매우 유용하지만 그래도 JSX를 편안하게 작성할 수 있도록 어트리뷰트를 어떻게 쓰는지 이해하는 것도 중요하다.

---

요약

• React 컴포넌트는 서로 관련이 있는 마크업과 렌더링 로직을 함께 그룹화한다.
• JSX는 HTML과 비슷하지만 몇 가지 차이점이 있다.
  필요한 경우 변환기를 사용할 수 있다.
• 오류 메세지는 종종 마크업을 수정할 수 있도록 올바른 방향을 알려준다.

---

React 공식 문서

https://react.dev/

React 비공식 번역 문서

https://react-ko.dev/

MDN

https://developer.mozilla.org/ko/