JSX란?

리액트의 JSX

리액트에서는 화면을 리턴하기 위해서 HTML과 비슷하게 생긴 JSX를 사용한다.
JSX는 HTML과 자바스크립트의 로직을 합친 버전이라고 생각하면 된다.
그래서 HTML에 있는 데이터를 자바스크립트 로직을 통해 동적으로 조작할 수 있다.

리액트에서는 마크업을 JSX를 통해서 진행하고 있다.
이러한 점이 전통적인 웹사이트 개발과 리액트의 다른점이라고 할 수 있다.

JSX의 특징

1. 하나의 root만 가져야 한다.

따라서 여러 개의 컴포넌트를 리턴하고자 한다면 가장 상위에서 묶어줘야 한다.

return (<div>
  <Component_1 />
  <Component_2 />
  // ...
</div>);

<div> 태그로 묶어도 되지만 그것은 브라우저에서 HTML로 변환될 때
동일하게 <div> 태그로 바뀌기 때문에 div soup 현상이 발생할 수 있다.
(div 안에 div 안에 div 안에 div 안에... )

따라서 Fragment라는 태그를 통해서 HTML로 변환될 때 아무 흔적도 남기지 않을 수 있다. 빌드 워크플로가 지원되는 프로젝트에서 Fragment는 빈 태그로도 사용이 가능하다. 아래와 같다.

return (<>
  <Component_1 />
  <Component_2 />
  // ...
</>);

왜 여러 컴포넌트를 내보낼 수 없을까?

JSX는 자바스크립트의 객체로 변환이 되고 하나의 컴포넌트는 곧 하나의 함수인데
하나의 함수에서 여러 오브젝트를 리턴할 수가 없음!

그래서 만약 루트를 묶어주고 싶지 않다면 배열로 내보낼 수 있지만
그것은 더 귀찮은 방법이 될 수 있기 때문에 div 혹은 Fragment로 묶는 것이 좋음!

2. 속성값은 camelCase로 작성한다.

위에서 설명했듯이 JSX는 자바스크립트의 객체로 변환이 되는데
자바스크립트 객체의 key 값으로는 대시(-)나 예약어를 사용할 수 없다.

그래서 리액트의 컴포넌트 안의 태그나 컴포넌트의 속성을 camelCase로 작성해야 한다.