공식문서 읽기: Writing Markup with JSX

톺아보기

---

리액트에서의 JSX 문법

1. 리액트에서는 다른 방식으로도 컴포넌트를 작성할 수 있지만, 많은 개발자가 주로 JSX 문법으로 컴포넌트를 작성한다.
   * 반드시 JSX로 컴포넌트를 작성해야 하는 것은 아님.

2. 웹이 사용자와의 상호작용이 강화되는 방향으로 발전하면서 logic이 컨텐츠를 결정하는 비중이 증가했다. 이에 따라 React에서는 렌더링 logic과 마크업이 같은 컴포넌트에 존재한다.

3. JSX는 HTML과 비교했을 때 크게 3가지의 Rule를 가지고 있다.
   * 모든 태그에 닫힌 태그가 필요하다.

   * 하나의 부모 tag로 요소를 감싸야 한다.

   • 겉보기에는 HTML과 유사하지만 내부적으로는 JS 객체로 변환됨. 따라서 일반적인 JS에서 여러 객체를 반환할 때 반드시 wrapping해야 하는 것과 같은 이치임

   
   

   * 모든 요소를 camelCase로 명명한다.

   • 마찬가지로 내부적으로 JS객체로 변환되기 때문에 JS의 rule에 기인한다. JS에서는 변수명에 class와 같은 예약어를 사용할 수 없으며 하이픈(-)을 쓸 수 없다.

고찰

---

React 컴포넌트를 작성할 때 모든 마크업 요소를 하나의 태그로 감싸주는 점, 반드시 camelCase로 속성을 작성하는 점에 대해서 근본적인 이유를 고민한 적이 없었다. 그동안 React의 특성이라고 뭉뚱그려 이해했던 rule들이 정확히는 JSX 문법의 특성이며, 왜 HTML과 차이가 있는지 이해할 수 있었다.

이를 토대로 특정 프레임워크를 사용할 때 그 프레임워크의 원리를 정확히 알고 있다면 자연스럽게 세부적인 rule들을 암기 없이 적용할 수 있다는 점을 배웠다.