React - Writing Markup with JSX

Writing Markup with JSX

https://beta.reactjs.org/learn/writing-markup-with-jsx

React Component는 React가 브라우저에 렌더링하는 일부 마크업을 포함할 수 있는 JavaScript function 이다. React Component는 JSX라는 구문확장을 이용하여 화면에 보여질 수 있다.

JSX는 HTML 과 비슷하지만 조금 더 엄격하고, 동적인 정보를 표시할 수 있다.

The Rules of JSX

JSX는 HMTL 처럼 보이지만 사실은 그 아래에서는 JS 객체로 변환된다. 이로인해 HTML과 JSX는 비슷한지만 유의해서 써야할 점들이 생긴다.

1. Return a single root element

JSX는 JavaScript이기 때문에 함수에서 두 객체를 배열로 만들지 않고서는 반환할 수 없다. 따라서 Component에서 여러가지 요소를 return 하려면 parent tag로 감싸야한다.

예시)

<div> 
    <h1>welcome</h1> 
    <img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo" />
</div>

또는

<>
    <h1>welcome</h1> 
    <img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo" /> 
</>

<>는 React fragment 라고 불린다.

2. Close all the tags

태그를 열었으면 꼭 닫아줘야한다.

3. camelCase all most of the things!

JSX는 JavaScript로 바뀌고, JSX로 작성된 속성은 JavaScript의 키가 된다.
JavaScript는 변수 이름에 제한이 있는데 이는 JSX에서도 지켜야 하는 부분이다.
따라서 JSX에서 camelCase로 HTML및 SVG속성을 작성해야 한다.
class대신 className을 사용하며, stroke-width대신 strokeWidth를 사용해야한다.

aria-* , data-*는 예외적으로 -를 사용하여 HTML와 동일하게 사용한다.

camelCase : https://ko.wikipedia.org/wiki/%EB%82%99%ED%83%80_%EB%8C%80%EB%AC%B8%EC%9E%90
aria-* : 장애를 가진 사람들이 손쉽게 접근할 수 있도록 하는 속성 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
data-* : 특정한 데이터를 DOM 요소에 저장해두기 위한 HTML5 속성 https://velog.io/@yunsungyang-omc/HTML-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-data-attribute

Let's develop level up