JSX는 js file 내에서 html 같은 마크업을 할 수 있도록 하는 js 확장 문법이다.
01. JSX: Putting markup into JavaScript
web은 html, css, js로 구성된다. 그리고 오랫동안 개발을 할 때 컨텐츠는 html, 페이지의 로직은 js에 작성하는 등 이들을 각각의 파일로 구분지어 작성해왔다.
하지만 점점 웹의 상호작용이 활발해 지면서 js가 컨텐츠에 끼치는 영향력이 커졌다. 따라서 React는 markup과 로직을 같은 공간에 가지고 있는, 컴포넌트 라는 개념을 도입했고, React component는 보통 JSX문법으로 작성된다.
- 기존의 html, js 개발 방법
- React component ( markup + logic )
이렇게 markup 과 logic을 같은 공간에 작성하게 되면,
내부적으로는, 서로 연관되어 있으므로 변경사항이 있을 때 수정하기가 용이하며
외부에서 봤을 때 컴포넌트간에 관심사에 따라 markup,로직이 분리되므로 변경사항이 있더라도 서로에게 미치는 영향력을 줄일 수 있다.
✨ JSX는 html처럼 보이지만, 중괄호를 이용하여 동적인 정보를 표현할 수 있다.
02. The Rules of JSX
- 2-1. 하나의 루트 요소를 반환한다. 만약 여러 요소를 반환하고 싶은 경우, 부모tag로 감싸서 반환해야 한다.
<div>
<h1>The Rules of JSX</h1>
<p>✅JSX should return single root element</p>
</div>fragment 라고 불리는 빈tag를 이용해서 여러 요소를 묶을 수도 있다.
<>
<h1>The Rules of JSX</h1>
<p>✅JSX should return single root element</p>
<>- 2-2. 모든 tag는 닫아주어야 된다.
- 2-3. camelCase ( ✅ JSX는 결국 js로 변환된다! )
- JSX는 js로 변환되는데, 이때 JSX에 작성된 속성들은 JS 객체형태로 변환된다. 따라서 JSX의 속성들은 js에서 지켜야 하는 변수명 규칙( 예약어 사용 금지, 첫 번째 문자에 숫자 금지 등)을 지켜야 하므로 정해진 camelCase형식으로 작성해야 한다.
