리엑트를 다루는 기술[1] : 왜 리엑트인가?
자바스크립트가 발전을 거듭하면서 자바스크립트만으로 규모가 큰 애플리케이션을 만들 수 있게 되었습니다.
애플리케이션을 자바스크립트 만으로는 관리하기 어려우니 프레임워크를 사용하여 더 잘 다루려 하였습니다.
프레임워크는 모델과 뷰를 사용하는 아키텍쳐를 사용하여 구현하였습니다.
model: 애플리케이션의 데이터를 관리하는 영역입니다.
view: 사용자에게 보이는 부분입니다.
사용자가 데이터의 변경을 요청하면 변경한 부분을 반영하여 view로 보여줘야 합니다.
리엑트는 라이브러리로 개발되었으며, 기존 뷰를 날려버리고 다시 랜더링하는 방법으로 이 부분을 구현했습니다.
애플리케이션 구조가 단순해지고, 작성하는 코드 양이 줄어드는 장점이 있습니다.
또한 리엑트는 컴포넌트의 개념을 도입했습니다.
컴포넌트란 재사용이 가능한 API로, 생김새와 작동 방식을 정의합니다.
가상 DOM(Virtual DOM)
DOM(Document Object Model): 객체로 문서 구조를 표현하는 방법으로 XML 또는 HTML로 작성합니다.
HTML은 정적이므로 업데이트를 해줄 때마다 새로 랜더링을 해야 하는데, 빈번한 랜더링은 성능 저하로 나타납니다.
성능을 향상시키기 위해 DOM을 최소한으로 처리하는 방법으로, 추상화된 방법인 Virtual DOM이 제시되었습니다.
Virtual DOM은 전체 UI를 리렌더링 후, 현재 DOM과 차이점을 확인하고, 바뀐 부분만 DOM에 적용합니다.
Virtual DOM은 지속적으로 데이터가 변화하는 대규모 애플리케이션에 적용하기 위해 생성되었습니다.
따라서 적용했을 때 항상 성능을 향상시키지는 않습니다.
초기 랜더링과 업데이트
초기 렌더링은 render 함수를 실행합니다. 컴포넌트가 어떻게 생겼는지 정의하고, 뷰와 작동 원리를 포함한 객체를 반환합니다.
이 정보를 사용하여 HTML 마크업을 먼저 만들고, DOM 요소에 주입하여 이벤트를 생성합니다.
업데이트는 새로운 요소로 갈아 끼우므로 조화 과정(reconcilation)을 거친다고 말하기도 합니다.
업데이트 되면 render 함수를 실행합니다. 변경된 값을 포함한 컴포넌트가 어떻게 생겼는지 정의하고, 뷰와 작동 원리를 포함한 객체를 반환합니다. 반환된 객체를 이전 정보와 비교해서 차이를 알아내어 변경된 부분만 업데이트 됩니다(가상 DOM).
리엑트 공식 문서
하나의 트리를 다른 트리로 변환하는 연산 알고리즘은 n개의 엘리먼트가 있는 트리에 O(n3)의 복잡도를 가집니다.
React는 두가지 가정을 기반으로 O(n)의 복잡도의 휴리스틱 알고리즘을 구현했습니다.
1. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만듭니다.
2. 개발자가 Key prop을 통해, 여러 랜더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시할 수 있습니다.