[React] jsx

jsx란?

jsx란 javascript 와 xml를 합친 용어이고 자바스크립트를 확장한 문법이다
jsx코드는 js안에 xml 형태로 마크업코드를 넣을수 있다
jsx는 react에서 엘리먼트를 생성할때 사용된다.

const name = 'Josh Perez';

const element = <h1>Hello, {name}</h1>;

// 출력값 > Hello, Josh Perez

jsx의 사용규칙

jsx는 babel을 통해 js파일로 트랜스파일되기 떄문에 jsx코드 작성시 지켜야할 규칙이 있다

1. 태그를 꼭 닫아야한다.
   <div></div>
   처럼 닫는 태그를 꼭 적어줘야하고,
   input, br같은 단일태그는 아래와 같이 self-closing을 꼭 해줘야 한다.

   <br />

2. 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 한다.
   단순히 감싸는 용도로만 div를 사용하는것이 구조상 너무 복잡해질때는 fragment를 이용해서 감싼다
   (fragment는 dom node를 추가하지 않고 자식들을 그룹화 할수있다)

3. jsx안에서 자바스크립트 변수나 문법을 사용할때는 {}안에 적어줘야 한다.

4. 태그의 attribute 중 class와 for 대신 className과 htmlFor를 사용해줘야한다. class는 javascript에서 키워드이기 때문.

jsx를 사용하는 이유

React에서 element를 생성하는 방법

• React.createElement

// 형태
// React.createElement(element, props, ...children)

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

React.createElement를 사용할때 단점

1. 엘리먼트를 만들때마다 호출해야 하기때문에 코드가 길어질수있음
2. 엘리먼트 구조를 한눈에 보기힘들기 때문에 가독성이 떨어진다.

• jsx

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

jsx는 js코드 내부에서 마크업코드를 작성 가능하기때문에 엘리먼트구조를 직관적으로 파악 할 수 있다.
그리고 다른 메서드를 호출하지 않고도 바로 엘리먼트를 생성 할 수 있다.

jsx로 코드를 작성하더라도 jsx는 babel을 통해 React.createElement의 형태로 트랜스파일 된다.

jsx의 장단점

장점

• 코드의 가독성을 높일수 있고, xml문법과 유사하여 중첩된 구조를 더 잘나타낼수있다.
• 자바스크립트의 확장문법이기 때문에 자바스크립트의 모든 기능과 문법을 사용할수 있다.

단점

• jsx는 빌드환경에서 트랜스파일 설정을 해줘야 한다. 하지만 CRA를 통해 파일을 만들면 babel이나 webpack같은 build도구를 따로 설정해주지 않아도 build시 내가 제작한 앱의 최적화된 build파일이 생성된다.