React

리액트는 프론트앤드 개발을 위한 Javascript 오픈소스 라이브러리이다.
리액트는 사용하는 이유는 총 3가지이다.

1. 선언형
2. 컴포넌트 기반
3. 범용성

리액트는 선언형으로 개발할 수 있다.
코드를 자세히 분석하지 않고도 코드를 분명하게 알 수 있다.
리액트는 한 페이지를 보여주기 위해 HTMl/CSS/JS로 나눠서 적기 보다는
하나의 파일에 명시적으로 작성 할 수 있게 JSX를 활용한 선언형 프로그래밍이다.

리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에 기능 자체에 집중하여 개발 할 수 있다.

• 예시

const Cart = ({ items }) => (
	<section className="cartContainer">
  	  <h1>장바구니</h1>
  	  <SelectAllCheckBox />
  	  <div className="itemContainer">
             {items.map((item)} => <Item item={item}/>)}
	  </div>
        </section>
)

JSX란?

JSX는 Javascript가 확장된 문법이지만 브라우저가 바로 실행할 수 있는 코드는 아니다.
그래서 브라우저가 이해할 수 있는 Javascript 코드로 변환을 해줘야한다.
이때 사용하는 것이 Babel이다. Babel은 JSX를 브라우저가 이해할 수 있는 Javascript로 컴파일한다.