[React] 초기 렌더링과 리렌더링
React - 2
[본 글은 '리액트를 다루는 기술' 의 책을 참고로 정리한 공부 내용입니다.]
React는 다른 프레임워크와 다르게 오로지 V(View)만 신경 쓰는 라이브러리이다.
이전에 잠깐 언급한 렌더링과 리렌더링에 대해 적어보려한다.
이해를 위해 사전에 익혀두어야 하는 개념이 있다.
컴포넌트와 render 함수
컴포넌트
부품의 개념. 버튼과 텍스트 박스 등의 범용성이 높은 요소를 컴포넌트로 정의해 공장처럼 UI 부품을 설계할 수 있다. 그러나 컴포넌트는 다른 프레임워크의 *템플릿과는 다르게 좀 더 복합적인 개념을 띄우고 있다. 재사용이 가능한 API이며 보다 다양한 기능, 무엇보다 컴포넌트 내에 생김새 및 작동방식을 정의한다.
또한 컴포넌트 내에 또 다른 컴포넌트가 들어갈 수 있다.
(*템플릿 : 데이터셋을 HTML 형식을 문자열 형태로 반환한다)
render 함수
UI를 사용할 때는 필연적으로 눈에 보이는 화면을 구성해주는 렌더링이 필요하다.
리액트에서는 render 함수가 바로 그 역할을 담당하고 있다.
render 함수는
컴포넌트가 어떻게 생겼는지 정의하고,
뷰의 구성과 작동 방식에 대한 정보를 지닌 객체를 반환한다.
컴포넌트와 render 함수에 대한 좀 더 자세한 설명은 초기 렌더링과 조화 과정을 정리하며 서술하겠다.
초기 렌더링
렌더링을 담당하는 render 함수는 컴포넌트의 정보를 이용해 화면을 구성(렌더링)한다.
컴포넌트가 내부에 중첩되어 선언되어 있는 경우에 render 함수를 실행할 시, render 함수는 중첩된 컴포넌트도 재귀적으로 렌더링을 하게 된다. 재귀가 끝나 최상위 컴포넌트의 렌더링이 끝나면 render 함수가 반환한 객체의 정보를 이용하여 문자열 형식의 html코드를 반환해 특정 DOM에 주입한다.
좀 더 간결하게 과정을 설명하면
1. 컴포넌트 정의
2. 컴포넌트의 정보를 이용해 렌더링
3. 문자열 형식 html 코드 반환
4. DOM 요소에 주입
리렌더링 (조화 과정)
리액트에서 뷰를 업데이트(리렌더링)할 때 이를 '조화 과정을 거친다' 라고 표현한다. 이전에 언급한 것처럼, 뷰를 변형시키는 것으로 보이나 사실 render 함수로 인해 새로운 요소로 갈아끼워진다. 데이터를 업데이트 했을 때 컴포넌트는 render 함수를 재차 호출해 새로운 뷰를 생성한다. 이전 게시물에 언급했던 문제점으로 인해, 리액트에서는 DOM에 반영하기 이전, 이전에 생성한 컴포넌트 정보와 다시 렌더링한 정보를 비교해 최소한의 연산으로 DOM 트리를 업데이트 한다.
즉 정리하자면,
1. 데이터의 업데이트
2. 업데이트 된 데이터를 이용한 render 함수의 리렌더링
3. 이전의 컴포넌트, 리렌더링된 컴포넌트의 차이 비교
4. 바뀐 요소들만 DOM에 반영
그렇지만 이런 잦은 렌더링이 반복되고 DOM에 수시로 반영된다면
부하가 생기지 않을까?
DOM은 동적 IU에 최적화가 되어있지 않기에 잦은 렌더링, 대규모 어플리케이션에서는 성능에 문제가 생기는 건 필연적일 수 밖에 없다. 그렇기에 리액트에서는 Virtual DOM이라는 것을 사용하고 있는데, 이 Virtual DOM에 관해서는 다음 게시물에서 천천히 다뤄보도록 하겠다.
