React / JSX

React란?

프론트엔드 개발을 위한 사용자 인터페이스를 구축하는 데 사용되는 '오픈 소스 자바스크립투 라이브러리' 입니다.

페이스북에 의해 개발되었으며 현재는 페이스북과 개발자 커뮤니티에 의해서 유지되고 있습니다.

 

React 특징

•  한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적는 것 보다 JSX를 활용한 선언형 프로그래밍을 지향합니다. 
• 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발합니다. 컴포넌트로 분리시켜 독립적이고 재사용 가능한 코드를 작성하며 기능 자체에 집중하며 개발할 수 있습니다.
• JavaScript 프로젝트 어디에서든 유연하게 적용 가능하며 Facebook에서 관리하기 때문에 안정적입니다. 또한 리액트 네이티브를 통해 모바일 개발도 가능합니다.

 

 

JSX

 JSX는 자바스크립트의 문법 확장으로 개발자들이 자바스크립트 코드 내 HTML과 같은 코드를 작성할 수 있게 해줍니다. React의 핵심 기능으로써 사용자 인터페이스 구성 요소의 구조와 appearance를 정의할 때 사용합니다.

 

 개발자들은 JSX를 사용해 HTML과 유사한 코드를 직접 자밧크립트 파일 내에 작성할 수 있고 이 코드는 DOM을 만들고 자바스크립트 코드로 컴파일 될 수 있습니다.

 

그 예로 아래 코드와 같이 자바스크립트 코드를 작성해 버튼을 만들어 DOM에 추가하는게 아니라 HTML처럼 보이는 JSX코드를 작성해 버튼을 추가할 수 있습니다.

<button onClick={handleClick}>Come on!</button>

 

 하지만 JSX는 브라우저가 바로 실행할 수 있는 JavaScript코드가 아닙니다. 그래서 브라우저가 이해할 수 있는 브라우저 코드로 변환을 해줘야 하는데 이때 이용하는 것이 Babel!   Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일합니다. 

 

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