React 개념, 장점, 컴포넌트, 동작원리, virtual dom, reconciliation

개념

• React는 UI를 구축하기 위한 JavaScript 프론트엔드 라이브러리. 주로 SPA 만들 때 사용

 

장점

1. virtual DOM을 사용해서 어플리케이션의 성능을 향상 시킵니다.
2. 서버, 클라이언트 사이드 렌더링 지원이 가능합니다.
3. 컴포넌트의 가독성이 높고 간단하여 유지보수가 쉽습니다.
4. 다른 프레임워크와 혼용도 가능합니다.

컴포넌트란?

•  컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수.
• 레고 블록과 같이 작은 단위로 만들어서 그것들을 조립하듯이 개발하는 방법입니다. 캡슐화, 확장성, 결합성, 재사용성과 같은 이점이 있습니다.

**컴포넌트 이름은 항상 대문자로 시작하도록 한다. (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다.

 

---

리액트의 내부 작동 원리

virtual dom 

• 동적으로 데이터가 변화했을 때 직접적으로 DOM을 조작하는 것이 아니라 DOM의 사본이라고 할 수 있는 새로운 Virtual DOM을 생성한다. 그리고 새로 생성된 Virtual DOM과 이전에 저장된 Virtual DOM을 비교해 변경된 부분의 DOM 만을 변경한다. (조화과정)
• 위와 같은 과정을 React에서는 ReactDOM.render() 함수가 도맡아서 처리하고 있다.
• 이 때 virtual DOM을 갱신하는 방법은 setState() 메서드를 호출하는 방법과, Redux의 경우처럼 store가 변하면 다시 최상위 컴포넌트의 render() 함수를 호출해서 갱신하는 2가지 방법이 있습니다.

장점

• Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 합니다.
• virtualDOM을 이용하는 이유는 효율성 때문입니다. virtualDOM을 활용하면 실제 DOM을 직접 바꾸는 것보다 시간 복잡도가 현저히 낮아집니다. 
• 먼저 브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거칩니다.  작은 변화에도 매우 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하됩니다. Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달합니다.

 

리액트에서 조화과정(Reconciliation, 재조정)의 시간복잡도를 O(n)까지 줄이는 방식

1. dom 엘리먼트의 타입이 다른 경우 :이전 트리를 버리고 완전히 새로운 트리 구출(비효율적)
2. dom 엘리먼트의 타입이 같은 경우 : 스타일 포함, 변경된 속성들에 대해서만 갱신
3. 리액트 key 이용 : 자식들이 key를 가지고 있다면, key 를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인