리액트(React)

리액트(React)

React는 페이스북에서 개발한 UI 라이브러리로 재사용 가능한 UI를 생성할 수 있게 해준다.

React는 라이브러리긴 하지만 Redux, react-router와 함께 프레임워크처럼 사용된다.

React는 Virtual DOM이라는 개념을 사용하여 상태 변화에 따라 선택적으로 UI를 렌더링한다.

---

DOM (Document Object Model)

객체를 통해 구조화된 문서를 표현하는 방법. (XML,HTML로 작성)

웹 브라우저(클라이언트)는 DOM을 통해서 javascript, css를 적용한다.

DOM의 문제점

DOM API의 최대 문제점은 동적 UI에 최적화되지 않음이다.

대규모 애플리케이션 또는 수 많은 데이터가 로딩되고 표현해야하는 애플리케이션에서 DOM에 직접 접근하여 프론트엔드에 변화를 주다 보면 성능상에 문제가 발생한다.

* DOM변화가 있을 때마다 css를 다시 연산하고 레이아웃을 구성한 뒤 페이지를 그린다. (이게 오래 걸림)

레이아웃을 구성을 계산하는 것이 reflow, 레이아웃에 관계없는 것들을 처리하는 것이 repaint라 한다.

padding = "5px"; // reflow, repaint 둘다 되니까.
color = "black"; // repaint 레이아웃변경이 없으니까 reflow는 안 일어남

브라우저가 마냥 비효율적이게 처리하지는 않는다.

단 시간내에 reflow가 여러번 발생하려고 하면 이 작업들을 모아서 한 번에 처리한다.

다만 최적화를 하지 못할 때가 있어서 reflow 횟수를 줄이기 위해 노력해야 한다.

즉, 최소한의 DOM조작을 해야 한다.

---

Virtual DOM

Virtual DOM을 사용하면 실제 DOM에 접근해서 변경하는 대신, 추상화시킨 자바스크립트 객체를 구성하여 사용한다. (DOM사본)

React에서 처리과정

1) 데이터로드

2) Virtual DOM에 렌더링

3) 이전 렌더링 내용과 Virtual DOM에 있는 내용을 비교

4) 바뀐 부분만 DOM에 적용

---

리액트를 사용하는 이유

- Virtual DOM을 통한 UI 업데이트 간결화 및 컴포넌트의 유지보수가 유용