JSX로 마크업 작성하기
수년 동안 웹 개발자는 콘텐츠를 HTML로, 디자인을 CSS로, 논리를 JavaScript로 유지하면서 종종 별도의 파일에 보관했습니다! 페이지의 논리가 JavaScript에서 별도로 존재하는 동안 콘텐츠는 HTML 내부에 마크업되었습니다.
웹이 보다 대화식으로 바뀌면서 논리가 점점 더 콘텐츠를 결정했습니다. JavaScript가 HTML을 담당했습니다! 이것이 React에서 렌더링 로직과 마크업이 같은 장소(컴포넌트)에 함께 존재하는 이유입니다.
버튼의 렌더링 로직과 마크업을 함께 유지하면 편집할 때마다 서로 동기화된 상태를 유지할 수 있습니다. 반대로, 버튼의 마크업과 사이드바의 마크업과 같이 관련이 없는 세부 사항은 서로 격리되어 있으므로 둘 중 하나를 자체적으로 변경하는 것이 더 안전합니다.
JSX는 HTML과 많이 유사하지만 약간 더 엄격하고 동적 정보를 표시할 수 있습니다. 이것을 이해하는 가장 좋은 방법은 일부 HTML 마크업을 JSX 마크업으로 변환하는 것입니다.
JSX의 규칙
1. 단일 루트 요소 반환
여러 JSX 태그를 래핑해야 하는 이유는 무엇입니까?
JSX는 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환됩니다.
함수에서 두 객체를 배열로 래핑하지 않고는 반환할 수 없습니다. 이것은 두 개의 JSX 태그를 다른 태그나 조각으로 래핑하지 않고는 반환할 수 없는 이유를 설명합니다.
2. 모든 태그 닫기
3. camelCase 의 모든 것!
JSX는 JavaScript로 바뀌고 JSX로 작성된 속성은 JavaScript 객체의 키가 됩니다. 자신의 컴포넌트에서 종종 이러한 속성을 변수로 읽어들일 수 있습니다.
그러나 JavaScript는 변수 이름에 제한이 있습니다. 예를 들어 이름에 대시를 포함하거나 와 class 같은 예약어를 사용할 수 없습니다.
이것이 React에서 많은 HTML 및 SVG 속성이 camelCase로 작성되는 이유입니다. 예를 들어, stroke-width대신 strokeWidth. class는 예약어 이므로 React에서는 해당 DOM 속성className 의 이름을 따서 대신 작성합니다.
전문가 팁: JSX 변환기 사용
변환기 를 사용 하여 기존 HTML 및 SVG를 JSX로 변환하는 것이 좋습니다. 변환기는 실제로 매우 유용하지만 JSX를 혼자서 편안하게 작성할 수 있도록 무슨 일이 일어나고 있는지 이해하는 것은 여전히 가치가 있습니다.
