JSX란?

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it.

JSX는 자바스크립트 파일 내의 마크업을 html처럼 사용할 수 있도록 자바스크립트를 확장한 문법이다. 컴포넌트를 작성하기 위한 다른 방법들이 있지만, 대부분 리액트 개발자들은 JSX의 간결함을 선호하고, 대부분의 코드 베이스에 JSX를 사용한다.

-> JSX는 자바스크립트 파일 내에서 html 문법을 사용하기 위한 문법이다. JSX가 간결하기 때문에 사람들이 많이 사용한다.

수년 동안 웹 개발자들은 HTML로 컨텐츠를, CSS로 디자인을, JavaScript로 로직을 만들었다. 하지만, 시간이 지날수록 로직이 컨텐츠를 결정하는 경우가 많아졌다. 그래서 Js가 HTML을 담당하게 됐다. 이것이 React에서 렌더링과 마크업이 같은 위치의 컴포넌트에 있는 이유다.

서로 관련 있는 로직과 마크업이 함께 존재한다면 모든 수정에서 서로 동기화 상태를 유지할 수 있다. 반대로 서로 관련 없는 로직과 마크업은 함께 존재하지 않으므로 개별적으로 변경할 수 있다.

---

JSX 규칙

1. 단일 root 요소를 반환해라(Return a single root element)

• 컴포넌트에서 여러 요소를 반환하기 위해서는 하나의 부모 태그로 감싸야 한다.

const Footer = () => {
	return (
    	<footer>
      		<h1>footer</h1>
      	</footer>
    )
}

위 코드는 return문 내의 root 요소가 <footer> 하나이므로 문제가 없다.

const Footer = () => {
	return (
      	<div>
      		<h1>Hello</h1>
      	</div>
    	<footer>
      		<h1>footer</h1>
      	</footer>
    )
}

위 코드는 retrun문 내의 root 요소가 <div>와 <footer> 두 개이므로 오류가 발생한다.

왜 여러 JSX태그를 하나로 감싸줘야 할까

JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can’t return two objects from a function without wrapping them into an array. This explains why you also can’t return two JSX tags without wrapping them into another tag or a Fragment.

JSX는 HTML처럼 보이지만, 내부에서 Js객체로 변환된다. 하나의 배열로 감싸지 않은 하나의 함수는 두 개의 객체를 반환할 수 없다. 또 다른 태그나 프래그먼트로 감싸지 않으면 두 개의 JSX태그를 반환할 수 없다.

-> JSX는 Js객체를 반환하므로, Js 함수는 두 개의 객체를 return할 수 없다. 그러므로 한 개의 객체를 return할 수 있도록 하나의 태그로 묶어야 한다.

---

2. 모든 태그를 닫아라(Close all the tags)

• 대표적인 예시로 <img>가 있다.
  HTML에서 <img>는 닫는 태그 없이도 사용할 수 있지만, JSX에서 <img>와 같이 HTML에서 닫는 태그 없이도 사용할 수 있는 태그들은 반드시 <img/>의 형태로 작성해야 한다.
  

---

3. 대부분이 카멜 케이스다.(camelCase most of the things)

• CSS 코드를 jsx파일 내에서 사용할 때, CSS 내에서는 background-color을 사용했지만, jsx 내에서는 backgroundColor로 사용한다.
• class 명을 선언할 때도 class가 아닌 className을 사용하여 class명을 지정할 수 있다.

const Hello = () => {
	return (
      	<div className="hello", style={{
      		backgroundColor: "red"
      	}}>
      		<h1>Hello</h1>
      	</div>
    )
}