🚗 JSX: Putting markup into JavaScript
웹은 전통적으로 HTML, CSS, JS의 결합으로 만들어진다. 각 각 markup, styling, interaction을 담당하며 독립적인 파일에 작성된다.
그러나, 웹의 발전과 함께 사용자와의 상호작용(interaction)이 강조됨에 따라, JavaScript를 통해 HTML을 조작해야 하는 경우가 많아진다.
💡 In React, rendering logic and markup live together in the same place - component
따라서 React는 markup과 rendering logic에 대한 코드를 동일한 위치에 작성하도록 하여 코드의 직관성을 높이고 오류 발생의 위험성을 낮춘다.
그렇다면, HTML의 역할과 JS의 역할을 어떻게 한 파일내에 동시에 수행할 수 있을까? React는 JSX를 통해 이문제를 해결한다.
🚓 Converting HTML to JSX
JSX는 그 syntax가 HTML과 상당히 유사하나, 보다 엄격한 규칙들이 존재하고 동시에 dynamic information display가 가능하다.
🚨 JSX와 React는 독립적으로 사용이 가능하다. JSX는 단순히 syntax extension이며 React는 JS Library임을 주의하자
다음 HTML 코드를
<h1>Todo List</h1>
<img src="..." >
<ul>
<li>Workout
<li>PS Study
<li>Crews
</ul>아래와 같이 JSX syntax로 변환할 수 있다.
export default function TodoList() {
return (
<>
<h1>Todo List</h1>
<img src="..." />
<ul>
<li>Workout</li>
<li>PS Study</li>
<li>Crews</li>
</ul>
</>
);
}앞서 말했듯이, JSX는 HTML에 비해 엄격한 syntax를 갖고 있다. 단순히 위의 HTML 예시를 return에 넣어서는 React가 올바르게 작동하지 않는다.
🚕 The Rules of JSX
HTML과 다른 JSX의 syntax는 다음과 같다.
• Return a single root element
Component에서 return되는 JSX는, 하나의 태그로 감싸져 있어야 한다.
return (
<h1>Hello World</h1>
<h2>Hello World</h2>
)즉 위와 같은 JSX는 아래와 같이 div 등의 태그로 감싸져야 한다.
return (
<div>
<h1>Hello World</h1>
<h2>Hello World</h2>
</div>
)만약 불필요한 markup을 발생시키고 싶지 않다면 <>...</>을 사용할 수 있다. 해당 태그는 Fragment라고 부르며 실제 DOM tree에는 반영되지 않는다.
JSX는 HTML과 닮아있지만, 결과적으로 실행시 JavaScript object의 형태로 변환된다. 함수에서 두 개의 반환값이 발생할 수 없듯이, JSX 역시 하나의 태그로 감싸진 채 반환되어야 한다.
• Close all the tags
JSX의 태그들은 반드시 닫혀있어야 한다. 이를 테면, HTML의 <img>의 경우 <img />의 형태가 되어야 한다.
• camelCase most of the things
앞서 말했듯이, JSX는 JavaScript object로 변환되며, JSX 상의 attribute들은 object의 key가 된다.
그러나, JSX도 결국 JS이므로, HTML에서 사용하던 attribute 들이 JS의 syntax와 겹치는 경우가 발생한다. 따라서 attribute들을 camelCase로 대체하는 경우가 많다.
예를 들어, class > className, stroke-width > strokeWidth등이 그 경우이며, 관련된 자세한 사항은 여기에서 확인할 수 있다.
