1. JSX, JavaScript XML

JSX란 JavaScript XML의 줄임 표현 으로 JS 코드 내에서 HTML 코드를 편리하게 작성하기 위한 편의성 제공 문법이기 때문에 HTML in JS 라고함

JSX의 등장 배경
SPA의 기본적인 동작 방식은 JS 코드를 통해 HTML 엘리먼트를 조작하는 것이기 때문에 JS의 역할이 그만큼 높아질 수밖에 없고,

이러한 이슈로 인해 HTML, CSS, JS를 별도의 파일로 관리하던 방식에서 HTML, CSS, JS를 하나의 파일에서 작성하고 관리할 수 있도록 하는 방식도 생겨나게 됨

1-1. 별도의 파일로 관리하는 방식

전통적인 개발 방식에서는 HTML과 JavaScript를 분리하여 레이아웃과 기능을 구분하여 관리

1-2. JSX를 활용하여 하나의 단일 파일 컴포넌트(Single File Component) 작성 방식

SPA 기반 컴포넌트 개발 방식에서는 하나의 .jsx 파일에 HTML과 JS, 필요하면 CSS까지 포함하여 UI 관심사별로 레이아웃과 기능, 디자인을 한 곳에서 관리

컴포넌트 작성 순서
컴포넌트를 작성하는 방법은 크게 다음의 순서를 따름

1. HTML, CSS, JS를 작성할 수 있는 JSX 파일 생성
2. 적절한 단위로 구분한 HTML 엘리먼트, CSS, JS 코드 작성
3. 해당 컴포넌트가 필요한 곳에서 함수처럼 호출하여 사용