[ React 기초 ] React JSX 알아보기

 React JSX 알아보기 

 

JSX ? 

• React에서 사용되는 JavaScript의 확장 문법이다.
• JavaScript와 HTML을 혼합한 형태로 작성할 수 있기 때문에 React 컴포넌트의 UI를 구성하는 것이 유용하다.

 

그렇다면 JSX로 JavaScript 코드가 바로 실행되나 ?

JSX는 JavaScript가 확장된 문법이지만 브라우저가 바로 실행을 할 수 있는것이 아니기 때문에 
Babel 을 이용해서 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해야 한다.

 

Babel ?

• Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일 해주며,
  컴파일 후에 JavaScript를 브라우저가 읽고 화면에 렌더링 해줄 수 있다.

 

그래서 JSX가 DOM보다 좋은 이유가 뭐에오

• DOM에서 JavaScript를 같이 사용하려면 JavaScript와 HTML을 연결하기 위한 작업이 필요하지만,
  React에서는 CSS, JSX 문법만 가지고 웹 애플리케이션 개발이 가능하다.
• JavaScript 만으로 마크업 형태의 코드를 작성하여 DOM에 배치할 수 있다.
• DOM 코드보다 명시적으로 코드를 작성할 수 있다.

 

이러한 JSX의 장점들을 활용하여 JSX의 구조와 동작에 대한 코드를

한 뭉치로 적은 코드셋을 컴포넌트라고 부른다.

 

컴포넌트에 대한 설명은 [ React 기초 ] React 알아보기 에서 볼 수 있다.