[React] Basic

JSX

• 부모요소가 하나가 있어야 한다.
• 아무 내용없는 태그를 추가해줘도 된다 (최상단에 플래그먼트 태그 추가)
• div className
• camelcase

Framework - library

F- 내장되어 있는 기능들이 갖춰진 상태

L- 환경만 제공하는 경우 ( 리액트 ) - 커스터마이징 가능

---

React의 특징

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
웹이 복잡해지기 때문에 - 상호작용을 위해 react를 사용한다.

• 컴포넌트 - 재활용 가능한 ui구성 단위 , 코드 유지보수에 좋다. 해당 페이지가 어떻게 구성되어 있는지 한눈에 파악이 가능하다. (class - function)
• 선언적 - 명령을 내리면 알아서 해준다.(↔ 절차적 방식)
• 가상돔 - 이전 ui상태를 메모리에 유지하고 변경되는 ui를 계산한다. ( 변경하고 싶은 부분을 바로바로 변경이 가능하다.)

Node.js
환경을 제공한다. (ex. ios)

• 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경
• 웹 시장이 커지면서 브라우저 밖에서도 개발이 하고 싶다는 니즈가 생김
• 프로젝트 개발 환경을 구축하는 주요 도구들이 Node.js 기반
  (CRA,Babel,webpack)

npm
패키지 매니저 (ex. 앱스토어)

• Node Package Manager
• npm을 통해 다양한 패키지를 설치하고 버전을 관리 할 수 있다.

CRA
리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구

• 초기세팅을 할 수 있는 환경이 다 제공되는 툴체인
• SPA를 만들기 위한 툴체인은 CRA를 추천
• SPA (single page application)
• NPA