UI 묘사 : JSX로 마크업 작성
JSX는 자바스크립트 파일 안에 HTML과 유사한 마크업을 작성할 수 있게 해주는 자바스크립트용 구문 확장자입니다. 컴포넌트를 작성하는 다른 방법도 있지만, 대부분의 React 개발자는 JSX의 간결함을 선호하며, 대부분의 코드베이스에서 이를 사용합니다.
학습 내용
- React가 마크업과 렌더링 로직을 혼합하는 이유
- JSX가 HTML과 다른 점
- JSX로 정보를 표시하는 방법
JSX: 자바스크립트에 마크업 넣기
웹은 HTML, CSS, 자바스크립트를 기반으로 구축되었습니다. 수년 동안 웹 개발자들은 콘텐츠를 HTML에, 디자인을 CSS에, 로직을 JavaScript에 각각 별도의 파일에 보관했습니다. 콘텐츠는 HTML 안에 마크업되고, 페이지의 로직은 자바스크립트 안에 별도로 존재했습니다:
하지만 웹이 더욱 인터랙티브해지면서 로직이 콘텐츠를 결정하는 비중이 점점 커졌습니다. 자바스크립트가 HTML을 담당했습니다! 이것이 바로 React에서 렌더링 로직과 마크업이 같은 위치의 컴포넌트에 함께 존재하는 이유입니다.
버튼의 렌더링 로직과 마크업을 함께 유지하면 편집할 때마다 서로 동기화 상태를 유지할 수 있습니다. 반대로 버튼의 마크업과 사이드바의 마크업과 같이 서로 관련이 없는 세부 사항은 서로 분리되어 있으므로 둘 중 하나를 단독으로 변경하는 것이 더 안전합니다.
각 React 컴포넌트는 React가 브라우저에 렌더링하는 일부 마크업을 포함할 수 있는 JavaScript 함수입니다. React 컴포넌트는 JSX라는 구문 확장자를 사용해 해당 마크업을 표현합니다. JSX는 HTML과 매우 비슷해 보이지만 조금 더 엄격하고 동적 정보를 표시할 수 있습니다. 이를 이해하는 가장 좋은 방법은 일부 HTML 마크업을 JSX 마크업으로 변환하는 것입니다.
참고
JSX와 React는 별개의 개념입니다. 종종 함께 사용되기도 하지만 서로 독립적으로 사용할 수도 있습니다. JSX는 구문 확장이고 React는 자바스크립트 라이브러리입니다.
HTML을 JSX로 변환하기
(완벽하게 유효한) HTML이 있다고 가정해 보겠습니다:
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
<ul>
<li>Invent new traffic lights
<li>Rehearse a movie scene
<li>Improve the spectrum technology
</ul>
그리고 이를 컴포넌트에 넣으려고 합니다:
export default function TodoList() {
return (
// ???
)
}
그대로 복사하여 붙여넣으면 작동하지 않습니다.
JSX가 HTML보다 더 엄격하고 몇 가지 규칙이 더 많기 때문입니다!
오류 메시지를 읽으면 마크업을 수정하도록 안내하거나 아래 가이드를 따를 수 있습니다.
참고
대부분의 경우 React의 화면 오류 메시지는 문제가 어디에 있는지 찾는 데 도움이 됩니다. 막히면 읽어보세요!
JSX 규칙
1. 하나의 루트 엘리먼트를 반환합니다.
컴포넌트에서 여러 요소를 반환하려면 단일 부모 태그로 요소를 감싸세요.
예를 들어, <div> 태그를 사용할 수 있습니다.
<div>
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
<ul>
...
</ul>
</div>
마크업에 <div>를 추가하고 싶지 않다면 대신 <>와 </>를 쓰면 됩니다:
<>
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
<ul>
...
</ul>
</>
이 빈 태그를 Fragment라고 합니다. 프래그먼트를 사용하면 브라우저 HTML 트리에 흔적을 남기지 않고 사물을 그룹화할 수 있습니다.
Deep Dive - 여러 개의 JSX 태그를 래핑해야 하는 이유는 무엇인가요?
JSX는 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환됩니다. 함수에서 두 개의 객체를 배열로 래핑하지 않고는 반환할 수 없습니다. 이것이 바로 두 개의 JSX 태그를 다른 태그나 조각으로 래핑하지 않고는 반환할 수 없는 이유를 설명합니다.
2. 모든 태그를 닫으세요.
JSX는 명시적으로 닫힌 태그를 필요로 합니다. <img> 태그는 <img /> 처럼 스스로 닫혀있어야합니다.
<li> oranges 는 반드시 <li>oranges</li> 처럼 닫힌 태그로 작성해야 합니다.
Hedy Lamarr의 이미지와 목록 항목이 닫히게 보이는 방식은 다음과 같습니다.
<>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
/>
<ul>
<li>Invent new traffic lights</li>
<li>Rehearse a movie scene</li>
<li>Improve the spectrum technology</li>
</ul>
</>
3. 거의 모든것을 카멜케이스로 작성하세요!
JSX는 자바스크립트로 바뀌고 JSX로 작성된 어트리뷰트는 자바스크립트 객체의 key가 됩니다.
자체 컴포넌트에서 이러한 속성을 변수로 읽고 싶을 때가 많습니다. 하지만 자바스크립트에는 변수 이름에 제한이 있습니다.
예를 들어, 변수 이름에는 대시를 포함할 수 없으며 클래스(class)와 같은 예약어를 사용할 수 없습니다.
그렇기 때문에 React에서는 많은 HTML과 SVG 어트리뷰트가 대/소문자를 구분하지 않고 대/소문자 구분 없이 camelCase로 작성됩니다. 예를 들어 stroke-width 대신 strokeWidth를 사용합니다. class는 예약어이므로 React에서는 해당 DOM 프로퍼티의 이름을 딴 className을 대신 작성합니다:
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
className="photo"
/>
이러한 모든 어트리뷰트는 DOM 컴포넌트 props 목록에서 찾을 수 있습니다. 틀렸더라도 걱정하지 마세요. React는 브라우저 콘솔에 수정 가능한 메시지를 출력 해줄겁니다.
함정
역사적인 이유로 aria-* 및 data-* 속성은 대시를 사용하여 HTML에서와 같이 작성됩니다.
팁: JSX 변환기 사용
기존 마크업에서 이러한 모든 속성을 변환하는 것은 지루할 수 있습니다! 변환기를 사용해 기존 HTML과 SVG를 JSX로 변환하는 것이 좋습니다. 변환기는 실제로 매우 유용하지만, JSX를 직접 편안하게 작성할 수 있도록 무슨 일이 일어나고 있는지 이해하는 것이 좋습니다.
요약
이제 JSX가 존재하는 이유와 컴포넌트에서 사용하는 방법을 알았습니다:
React 컴포넌트는 렌더링 로직과 마크업이 서로 연관되어 있기 때문에 함께 그룹화합니다.
JSX는 HTML과 비슷하지만 몇 가지 차이점이 있습니다. 필요한 경우 변환기(https://transform.tools/html-to-jsx)를 사용할 수 있습니다. 오류 메시지는 종종 마크업을 수정할 수 있는 올바른 방향을 알려줍니다.
발표요약)
JSX는 일반 Javascript 객체로 변환되므로, 항상 1개의 래핑된 엘리먼트를 리턴한다.
따라서 <div><div> <div><div> 처럼 두개가 존재한다면, <></> 로 감싸줘야한다.
JSX는 HTML 마크업 내에서 {data}, { getID() } 와 같이 Javascript를 호출할 수 있다는 점.