1. React

리액트 : 프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리

• 선언형 코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알수있게 작성하는 방식 JSX(JavaScript XML)라는 html과 JavaScript가 결합한 문법을 기반으로 명시적으로 코드를 작성하여 직관적으로 코드를 짤 수 있음
• 컴포넌트기반 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발 컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있음
• 범용성 리액트는 기존 프로젝트 어디에든 유연하게 사용

2. JSX(JavaScript XML)

React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법, 이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있음

JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있음

JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아님

Babel

JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일함. 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있음

React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있음

JSX규칙

하나의 엘리먼트 안에 모든 엘리먼트가 포함 ,JSX에서 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 감싸주어야 합

클래스 엘리먼트 사용 시 , className으로 표기

JSX에서 JavaScript를 쓰고자 한다면, 꼭 **중괄호{}**를 이용, 중괄호를 사용하지 않으면 일반 텍스트로 인식

React 엘리먼트가 JSX로 작성되면 **"대문자”**로 시작해야 합니다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식