리액트란 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리다.
React 3가지 특징
1) 선언형(명시적이라는 뜻이라고 보면 된다. 코드를 보면 바로 알수 있다..): 리액트는 한 페이지를 보여주기 위해 HTML,CSS,JS로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.
2) 컴포넌트 기반(Component-Based): 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다.
3) 범용성 (Learn Once, Write Anywhere) : 리액트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다. facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능하다.
컴포넌트간의 의존성이 없어져서 독립적으로 기능한다. 재사용 할수 있다. -> 기능작동에 집중하여 개발하고, 에러를 쉽게 찾고 유지보수, 의존성이 없으니 유닛테스트 가능하다.
JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아니다. React에서 UI를 구성할때 사용하는 문법으로 JavaScript를 확장한 문법이다. 이 문법을 이용해서 우리는 react 엘리먼트를 만들 수 있다. 그런데 JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript코드는 아니다. ‘Babel’을 통해 브라우저가 이해할 수 있는 JavaScript코드로 변환해주어야한다. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일한다.
JSX를 사용함으로써 코드의 복잡성을 줄이고 이를 이해하기 쉽게 만들수있다. JSX를 쓰지 않아도 React를 사용할 수 있다. 다만 문법적으로 가독성이 떨어지고 코드가 복잡해지는 단점이 있다.
JSX는 JavaSciprt를 확장한 문법으로 주로 React 컴포넌트를 작성할때 사용하는 문법이다.
{ }
내 JavaScript 표현식을 작성하면 된다.