React - JSX(Javascript Syntax Extension)

1. JSX

• 리액트에서 사용하는 자바스크립트 확장 문법
• 리액트에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 다른 UI 로직과 연결된다는 사실을 받아들인다.
• JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

1-1. JSX 장점

• HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙하다는 장점이 있다,.
• 자바스크립트 언어도 JSX 안에서 동작하게 할 수 있다.

2. JSX 사용하기

2-1. JSX에 표현식 포함하기

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

ReactDOM.render(
  element,
  document.getElementById('root')
);

2-2. JSX 특징

• 자바스크립트 표현
  {... javascript ... }
• className
• Inline Styling :<div style={{color: "red"}}>Hello React</div>
• Self Closing Tag <div />
• 모든 요소를 감싸는 최상위 요소 (React Fragments <>...</>)

** JSX는 내부 요소들을 감싸는 최상위 요소가 있어야 한다.
Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 요소(자식)들을 간단하게 그룹화 할 수 있는 기능