카테고리 없음

[리액트문서보기][UI 표현하기]JSX로 마크업 작성하기

졸린부엉이 2024. 3. 19. 12:43

학습내용

  • React에서 마크업과 렌더링 로직을 같이 사용하는 이유
  • JSX와 HTML의 차이점 (참고 사이트 확인)
  • JSX 규칙

 

 

 

◼ JSX: JavaScript에 마크업 넣기 

Web은 HTML, CSS, JavaScript를 기반으로 만들어져 왔습니다. 수년 동안 웹 개발자는 HTML로 내용을, CSS로 디자인을, JavaScript로 로직을 작성해 왔습니다. 보통은 HTML, CSS, JavaScript를 분리된 파일로 관리합니다! 페이지의 로직이 JavaScript 안에서 분리되어 동작하는 동안, HTML 안에서는 내용이 마크업 되었습니다.

 

그러나 Web이 더욱 인터랙티브해지면서, 로직이 내용을 결정하는 경우가 많아졌습니다. 그래서 JavaScript가 HTML을 담당하게 되었죠! 이것이 바로 React에서 렌더링 로직과 마크업이 같은 위치에 함께 있게 된 이유입니다. 즉, 컴포넌트에서 말이죠.

 

[+중요]
JSX와 React는 서로 다른 별개의 개념입니다. 종종 함께 사용되기도 하지만 독립적으로 사용할 수도 있습니다.
JSX는 확장된 문법이고, React는 JavaScript 라이브러리입니다.

 

 

 

 

◼ JSX 규칙  

1. 하나의 루트 엘리먼트로 반환하기

한 컴포넌트에서 여러 엘리먼트를 반환하려면, 하나의 부모 태그로 감싸야합니다.

 

불필요한 태그를 사용하게 된다면?!

Fragment라고 <></>빈태그를 사용하면 됩니다. Fragments는 브라우저상의 HTML 트리 구조에서 흔적을 남기지 않고 그룹화해 줍니다.

<> // fragment 태그
  <h1>Hedy Lamarr's Todos</h1>
</>

 

왜 여러 JSX 태그를 하나로 감싸줘야 할까요?
JSX는 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환됩니다.
하나의 배열로 감싸지 않은 하나의 함수에서는 두 개의 객체를 반환할 수 없습니다.
따라서 또 다른 태그나 Fragment로 감싸지 않으면 두 개의 JSX 태그를 반환할 수 없습니다.

 

 

 

 

2. 모든 태그는 닫아주기

<img>처럼 자체적으로 닫아주는 태그는 반드시 <img /> 형태로 작성해야합니다.

<img src="" alt="" />
<br/>
<hr/>

 

 

 

 

3. 거의 대대분 카멜케이스로

JSX는 JavaScript로 바뀌고 JSX에서 작성된 어트리뷰트는 JavaScript 객체의 키가 됩니다. 컴포넌트에서는 종종 어트리뷰트를 변수로 읽고 싶은 경우가 있습니다. 그러나 JavaScript는 변수명에 제한이 있습니다. 예를 들면, 변수명에 대시를 포함하거나 class처럼 예약어를 사용할 수 없습니다.

이것이 바로 React에서 HTML과 SVG의 어트리뷰트 대부분이 캐멀 케이스로 작성되는 이유입니다.

<div
  src="https://i.imgur.com/yXOvdOSs.jpg"
  alt="Hedy Lamarr"
  className="photo"
  style={{ backgroundColor:'red', fontSize:20 }}
>박스</div>

 

[+ 주의]
aria-* 와 data-* 의 어트리뷰트는 HTML에서와 동일하게 대시를 사용하여 작성합니다.

 

 

 

 

 

◼ 요약 

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