728x90
1. 리액트란?
- 사용자 인터페이스를 빌드할 수 있는 JavaScript 라이브러리
- 페이스북에서 제공해주는 프론트엔드 라이브러리
- 기존의 뷰를 없애고, Virtual DOM을 사용하여 처음부터 새로 렌더링을 하여 빠른 속도로 뷰를 변경시켜준다.
2. 장점
- Virtual DOM을 사용하여 속도가 빠르다.
- 자바스크립트 친화적이다.
- 간단한 개념만 알면 웹, 앱 모두 개발이 가능하다.
- 최대한 성능을 아끼고, 편안한 ux를 제공한다.
3. 특징
- Javascript 라이브러리
- MVC, MVW등인 프레임워크와 달리 오직 View만 신경 쓰는 라이브러리
4. 컴포넌트
- 특정 부분이 어떻게 생길지 정하는 선언체
- 제사용 가능 API. 수많은 기능 내장
- 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식 정의
- 컴포넌트 내부에 또 다른 컴포넌트 들어갈 수 있음
5. 렌더링
- 사용자 화면에 뷰를 보여 주는 것
6. render함수
- 맨 처음 어떻게 보일지 정하는 초기 렌더링 필요.
- 컴포넌트가 어떻게 생겼는지 정의
- HTML 형식의 문자열 반환 X
- 뷰의 생김새와 작동 방식에 대한 정보를 지닌 객체를 반환
- 내부의 컴포넌트들 재귀적 렌더링.
- 최상위 컴포넌트 렌더링 작업이 끝나면 지니고 있는 정보들을 사용해 HTML 마크업을 생성 후 DOM요소 안 주입
7. 조화과정
- 업데이트 과정을 거친다 = 조화 과정을 거친다.
- 컴포넌트 데이터 변화 시 뷰가 변형X 새로운 요소로 갈아 끼우기 O
- render함수가 맡아서 수행
- render 함수 반환 결과 곧바로 DOM에 반영하지 X, 이전 render 함수가 만든 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보 비교
- 자바스크립트 사용해 두 가지 뷰를 최소한의 연산 비교 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트
