JSX로 마크업 작성하기

JSX는 JavaScript 파일 안에 HTML과 유사한 마크업을 작성할 수 있게 해주는 JavaScript의 문법 확장입니다. 컴포넌트를 작성하는 다른 방법들도 있지만, 대부분의 React 개발자는 JSX의 간결함을 선호하며, 대부분의 코드베이스에서 이를 사용합니다.

JSX: JavaScript에 마크업 넣기

웹은 HTML, CSS, JavaScript를 기반으로 구축되어 왔습니다. 오랜 기간 동안 웹 개발자들은 콘텐츠는 HTML에, 디자인은 CSS에, 로직은 JavaScript에—종종 별도의 파일에!—보관했습니다. 콘텐츠는 HTML 안에 마크업되었고 페이지의 로직은 JavaScript에 별도로 존재했습니다:

HTML

JavaScript

하지만 웹이 더욱 상호작용적이 되면서 로직이 콘텐츠를 점점 더 결정하게 되었습니다. JavaScript가 HTML을 담당하게 된 것이죠! 이것이 바로React에서 렌더링 로직과 마크업이 같은 장소—컴포넌트—에 함께 존재하는 이유입니다.

Sidebar.jsReact 컴포넌트

Form.jsReact 컴포넌트

버튼의 렌더링 로직과 마크업을 함께 유지하면 매번 수정할 때마다 서로 동기화된 상태를 유지할 수 있습니다. 반대로, 버튼의 마크업과 사이드바의 마크업처럼 서로 관련 없는 세부 사항들은 서로 격리되어 있어 각각을 독립적으로 변경하는 것이 더 안전합니다.

각 React 컴포넌트는 브라우저에 렌더링할 수 있는 일부 마크업을 포함할 수 있는 JavaScript 함수입니다. React 컴포넌트는 JSX라는 문법 확장을 사용하여 해당 마크업을 표현합니다. JSX는 HTML과 매우 유사해 보이지만, 조금 더 엄격하며 동적 정보를 표시할 수 있습니다. 이를 이해하는 가장 좋은 방법은 일부 HTML 마크업을 JSX 마크업으로 변환해 보는 것입니다.

HTML을 JSX로 변환하기

다음과 같은 (완벽하게 유효한) HTML이 있다고 가정해 보세요:

그리고 이를 컴포넌트에 넣고 싶습니다:

그대로 복사하여 붙여넣으면 작동하지 않습니다:

이는 JSX가 HTML보다 더 엄격하고 몇 가지 규칙이 더 많기 때문입니다! 위의 오류 메시지를 읽으면 마크업을 수정하는 방법을 안내해 줄 것이며, 아래 가이드를 따를 수도 있습니다.

JSX의 규칙

1. 단일 루트 요소 반환하기

컴포넌트에서 여러 요소를 반환하려면,단일 부모 태그로 감싸세요.

예를 들어, <div>를 사용할 수 있습니다:

마크업에 추가적인 <div>를 넣고 싶지 않다면, 대신<>와 </>를 작성할 수 있습니다:

이 빈 태그를 Fragment라고 합니다. Fragment를 사용하면 브라우저 HTML 트리에 흔적을 남기지 않고 요소들을 그룹화할 수 있습니다.

2. 모든 태그를 닫으세요

JSX는 태그를 명시적으로 닫아야 합니다:<img>와 같은 셀프 클로징 태그는<img />가 되어야 하고,<li>oranges와 같은 래핑 태그는<li>oranges</li>로 작성되어야 합니다.

다음은 헤디 라마르의 이미지와 목록 항목이 닫힌 상태로 표시된 모습입니다:

3. 대부분의 것들을 camelCase로 작성하세요!

JSX는 JavaScript로 변환되고, JSX에 작성된 속성들은 JavaScript 객체의 키가 됩니다. 여러분의 컴포넌트에서는 이러한 속성들을 변수로 읽고 싶을 때가 많습니다. 하지만 JavaScript는 변수 이름에 제한이 있습니다. 예를 들어, 변수 이름에는 하이픈을 포함할 수 없거나class와 같은 예약어를 사용할 수 없습니다.

이것이 React에서 많은 HTML 및 SVG 속성이 camelCase로 작성되는 이유입니다. 예를 들어,stroke-width 대신 strokeWidth를 사용합니다.class는 예약어이기 때문에, React에서는 대신className을 작성하며, 이는해당 DOM 속성을 따서 명명되었습니다:

이러한 모든 속성은DOM 컴포넌트 props 목록에서 찾을 수 있습니다.실수로 잘못 작성하더라도 걱정하지 마세요—React는 가능한 수정 사항과 함께 메시지를브라우저 콘솔에 출력할 것입니다.

전문가 팁: JSX 변환기 사용하기

기존 마크업에서 이 모든 속성을 변환하는 것은 지루할 수 있습니다! 기존 HTML과 SVG를 JSX로 번역하기 위해변환기를 사용하는 것을 권장합니다. 변환기는 실제로 매우 유용하지만, JSX를 편안하게 직접 작성할 수 있도록 무슨 일이 일어나는지 이해하는 것은 여전히 가치가 있습니다.

다음은 최종 결과입니다:

요약

이제 JSX가 존재하는 이유와 컴포넌트에서 어떻게 사용하는지 알게 되었습니다:

• React 컴포넌트는 렌더링 로직과 마크업을 함께 그룹화합니다. 이 둘은 서로 관련되어 있기 때문입니다.
• JSX는 HTML과 유사하지만 몇 가지 차이점이 있습니다. 필요한 경우변환기를 사용할 수 있습니다.
• 오류 메시지는 종종 마크업을 수정하는 올바른 방향을 알려줍니다.