React!

javascript's 라이브러리

지속적으로 데이터가 변화하는 대규모 애플리케이션 구축 을 목표로 facebook에서 개발한 라이브러리

ui를 자동으로 업데이트 한다

가상 돔 : 이전 ui 상태를 메모리에 유지해 변경욀 ui의 최소 집합을 계산하는 기술

전체가 렌더링되는 것이 아니기 때문에 성능면에서 효과적이다.

spa?

single page application

브라우저 성능이 현재에 비해 저조했을 때 클릭할 때마다 서버에서 새 페이지를 로드하는 방식은 시간을 많이 지연시켰다.
이에 반해 단일 페이지 앱은 사용자가 요청한 데이터만 다시 로드하는 방식으로 더 빠른 퍼포먼스를 보일 수 있다. 이것이 단일 페이지 애플리케이션(SPA)가 등장한 방식이다!

spa 방식은 페이지가 프로세스의 어느 시점에서도 다시 로드되지 않고 컨트롤을 다른 페이지로 변환하지 않는다.

이점
1. 빠른 로딩 시간
2. 향상된 사용자 경험
3. 신속한 프론트 엔드 개발
SPA 등장으로 프론트 엔드와 백 엔드 개발 서비스가 분리돼 프론트 엔드를 독립적으로 구축, 테스트, 배포가 가능하다

단점
1. 검색 엔진 최적화가 어렵다.
2. 복잡한 SPA는 빌드 할 때 크기가 커 사용이 불편할 수 있다.
페이지의 복잡성으로 로딩 시간이 늘어날 수 있다.

jsx

자바스크립트 확장 문법

const hi = <p>Hi</p>;

위 코드는 jsx 문법으로 짜여졌다.
기존 js 문법이 아니기 때문에 .js 파일 내에 jsx 문법이 있으면 브라우저에서 해석하지 못한다. react.js를 사용하기 위해서는 해당 파일을 정규 js문법으로 변환시키는 컴파일 과정이 필요하다!

jsx element

HTML 문법을 JS 코드 내부에 작성하면 jsx다.

jsx attribute

""을 사용하면 태그에 속성을 부여할 수 있다. html에서 쓰는 속성명과 다를 수 있다.
대표적으로 class 대신 className을 사용해야한다. react.js 에서 클래스형 컴포넌트를 사용하기 때문!
slef-closing tag
jsx에서는 모든 태그가 스스로 닫힐 수 있다.
<div></div>와 <div/>는 같다!

Nested JSX

1.중첩된 요소를 만들 경우 반드시 소괄호로 감싸야 한다.

const good = (
  <div>
    <p>hi</p>
  </div>);

2. 항상 하나의 태그로 시작해야 한다.
   처음 작성된 요소가 sibling이면 안된다. 무조건 하나의 태그로 감싸져야 한다!
   이를 위해 <></>를 사용하기도 한다.

Rendering

html요소 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링이라고 한다.
React요소가 Dom node에 추가되어 화면에 렌더되려면 ReactDom.render 함수를 사용해야 한다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고 두 번째 인자는 해당 요소를 렌더하고 싶은 부모요소를 전달한다.