리액트란?

• 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용함.
• 오직 View만 신경쓰는 라이브러리

컴포넌트

• 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체
• 재사용 가능한 API로 수많은 기능들을 내장하고 있음
• 컴포넌트 하나에서 해당 컴포넌트의 작동방식, 생김새 정의

렌더링

• 사용자 화면에서 뷰를 보여주는 것
• 초기렌더링과 리렌더링으로 나눌 수 있음.

1. 초기 렌더링

• 맨 처음에 어떻게 보일지 정함 : render 함수

render(){...}
//컴포넌트가 어떻게 생겼는지 정의함.

• 뷰가 어떻게 생겼고 작동하는지에 대한 정보를 가진 객체 반환
• 컴포넌트 내부에 다른 컴포넌트 들어갈 수 있음 : render 실행 시, 내부 컴포넌트들은 재귀적으로 렌더링됨.
• 최상위 컴포넌트 렌더링 > HTML 마크업 언어 생성 > DOM에 주입

2. 조화 과정(reconciliation)

• 리액트에서 뷰를 업데이트하는 과정 == 조화과정이다.
• 컴포넌트는 데이터를 업데이트했을 때, 새로운 데이터를 가지고 리렌더링함 : 데이터를 가진 뷰 생성됨.
• 이전 렌더링된 컴포넌트 정보와 현재 값 비교
• 최소한의 연산으로 DOM 트리 업데이트

React 특징

가상 돔(Virtual DOM)

• 업데이트 처리 간결성

DOM(Document Object Model)

• 객체로 문서 구조를 표현하는 방식
• 웹 브라우저는 DOM을 활용하여 자바스크립트나 css 적용
• 트리형태 : 특정 노드 검색, 삽입, 삭제 등이 자유로움
• 동적 UI에 최적화되지 않음! : 자바스크립트를 활용하여 동적으로 만듦(HTML은 정적임)
• DOM은 매우 빠르나, DOM 업데이트 시 재연산되는 css, 레이아웃 구성, 페이지 리페인트 등에서 시간이 많이 소요됨 : 결과적으로 느려보임.

  따라서, 리액트는 Virtual DOM 방식을 통해 불필요한 업데이트를 줄이고 효율적으로 함.

리액트가 실제 DOM을 업데이트하는 방법

1. 데이터 업데이트 시, 전체 UI를 Virtual DOM에 리렌더링함.
2. 이전 Virtual DOM에 있는 내용과 현재 내용 비교
3. 바뀐 부분만 실제 DOM에 적용함.

기타 특징

• 리액트는 프레임워크가 아닌 라이브러리임.
• 다른 프레임워크처럼 Ajax, 라우팅, 데이터 모델링 등 내장하고 있지 않아 모두 구현해야함
• 리액트 라우터(react-router), Ajax 처리는 axios, fetch, 상태관리는 redux, MobX 사용으로 대체 가능
• 다양한 라이브러리를 입맛대로 설정 가능하나, 여러 라이브러리에 대한 지식도 있어야 함.
• 다른 프레임워크나 라이브러리와 혼용 가능함.