JSX 🐾

JSX

const element = <h1>Hello, world!</h1>;

이게 바로 JSX 이다 !

JSX
: Javascript XML(syntax extension for JavaScript / extensive markup language)

그럼 XML은?
: HTML의 한계를 극복한 마크업 언어

• 특징 : 호환성 / 확장성이 뛰어남, tag로 정의하며 데이터를 기술할 수 있다.
  홈페이지 구축, 검색 기능 향상, 복잡한 데이터 처리 용이

• HTML은 화면을 나타내는 문서가 하나의 파일로 저장 But, XML은 요소별 개별파일로 구성하고
  요소별로 저장/검색/재사용 가능

• 현재 XML단독으로는 잘 사용하지 않는다.

그렇다 !
자바스크립트 문법의 확장판 !
마크업과 로직을 포함하는 '컴포넌트'로 사용될 리액트의 가장 기본적인 개념이다.

JSX의 특성에 대해 알아보자.

JSX element

HTML문법을 JavaScript 코드 내부에 써주면 그것이 바로 JSX .js 파일 어디에서나 필요한 곳에 작성해주세요. 변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있다.

const hi = <p>Hi</p>;

const myFavorite = {
 food: <li>샐러드</li>,
 animal: <li>dog</li>,
 hobby: <li>programming</li>
};

JSX attribute

태그에 attribute(속성)을 주고 싶을 때는 항상 "" 쌍따옴표로 감싸주세요. attribute를 추가하고 싶을 때는 실제 HTML에서 쓰는 attribute name(속성명)과 다를 수 있으니 react 공식문서를 참고해주세요.

예를 들어, class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 className을 사용해야 합니다.

const hi = <input readOnly={true} />;

const myFavorite = {
 food: <li>샐러드</li>,
 animal: <li>dog</li>,
 hobby: <li className="list-item">programming</li>
};

Self-Closing Tag

그리고 JSX에서는 어떤 태그라도 self closing tag가 항상 가능합니다. <input>과 같이 하나의 태그가 요소인 경우에는 <input />와 같이 항상 /으로 끝내줘야 합니다.

<div />와 <div></div>는 같은 표현입니다.

Nested JSX

1. 소괄호로 감싸기

   const good = (
   <div>
       <p>hi</p>
   </div>
   );

   중첩된 요소를 만들려면 () 소괄호로 감싸주세요!

2. 항상 하나의 태그로 시작

   const wrong = (
   <p>list1</p>
   <p>list2</p>
   );

   위와 같이 제일 처음 요소가 sibling이면 에러 발생.
   무조건 하나의 태그로 감싸져야 한다. 아래의 코드처럼 첫 요소는 하나의 태그로 감싸주기. <> </>도 okay!

   const right = (
   <div>
       <p>list1</p>
       <p>list2</p>
   </div>
   );

Rendering

html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말합니다.

React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용합니다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다.

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

React공식 문서에서는 JSX 사용이 필수는 아니라고 하지만 대다수의 사용자가 사용하니 리액트의 기본 마크업 언어라고 생각하면 된다는 결론!