React에 대해서

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

 

1. 다른 웹 프레임워크나 라이브러리와 혼용해서 사용할 수 있음
2. 라우팅, 데이터 모델링, AJAX등은 외부 라이브러리를 사용해서 구현해야함
3. JSX(JavaScript 확장문법)을 사용하여 브라우저에서 실행되기 전 일반 JS형태의 코드로 변환됨
4. 최소한의 단위, 데이터함수, UI를 재사용 가능한 여러조각을 컴포넌트 기반으로 나누어 사용한다.
5. React의 개발핵심은 상태값을 효율적으로 관리하는것

 

리액트 라이프사이클(React LifeCycle) 

생성(Mount) /  갱신(Update) / 파기(Unmount)

 

리액트 가상 돔(React Virtual DOM)

리엑트에서 실제 DOM에 직접 접근하여 조작하는 대신, 적은 연산 시간을 위해 추상화한 자바스크립트 객체로서 실제 DOM의 가벼운 사본이라고 생각하자, 말그대로 가상 이기때문에 연산 시간이 적게 걸린다. 만약 리액트에서 인터렉션 발생시 바로 브라우저 DOM이 아닌 가상돔에 먼저 렌더링하고, 이를 이전의 가상DOM과 현재의 가상DOM을 비교해서 실제로 변경이 필요한 곳만 실제 DOM에 업데이트한다.

 

SPA(ingle Page Application)

한개의 페이지로 이뤄진 애플리케이 션으로으로 전통적인 다중 페이지 애플리케이션과는 달리 사용자가 애플리케이션을 로드할때 초기에 필요한 모든정적 리소스(HTML, CSS, JavaScript)를 불러오고, 그이후에는 서버로부터 필요한 데이터만을 동적으로 받아와서 페이지를 업데이트한다. 

 

- 단일 페이지 로드: 초기 로딩시 필요한 리소스를 미리 다운로드하여, 단일 페이지만 로드된다.

- 동적업데이트:  페이지 전체를 새로 고치지 않고도 필요한 부분만 동적으로 업데이트한다.