*리액트 특징
-
선언형 :
JSX를 사용해 명시적으로 작성 -
컴포넌트 기반 :
하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발 컴포넌트로 분리하면 서로 독립적이고 재사용 가능 -
범용성 :
자바스크립트 프로젝트 어디에든 유연하게 적용 가능
*JSX
-React에서 UI를 구성할 때 사용하는 문법, Javascript를 확장한 문법
-Babel: JSX를 브라우저가 이해할 수 있는 Javascript로 컴파일
-Javascript 만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있다.
-규칙
1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함 >> opening tag와 closing tag로 감싸주어야 함
2. 엘리먼트 클래스 사용 시, className으로 표기
3. Javascript 표현식 사용 시, 중괄호 {} 이용 (중괄호 없으면 일반 텍스트로 인식)
4. 사용자 정의 컴포넌트는 대문자로 시작
5. 조건부 렌더링은 if문이 아닌 삼항연산자 사용
6. 여러개의 HTML 엘리먼트 표시할 때, map()함수를 이용 >> 반드시 "key"JSX속성을 넣어야함
*SPA(Single Page Application)
-서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 담아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트
-장점
1. 사용자와의 Interaction에 빠르게 반응
2. 서버 과부하의 문제가 현저하게 줄어든다.
3. 전체 페이지를 렌더링할 필요가 없기 때문에 더 나은 유저 경험을 제공
-단점
1. Javascript 파일의 크기가 크다. >> 첫 화면 로딩 시간이 길어진다.
2. 검색 엔진 최적화(SEO)가 좋지 않다.
