컴포넌트 재조정(Reconciliation)
컴포넌트 재조정은 react가 Virtual DOM을 사용하여 변경된 부분만 실제 DOM에 업데이트하는 프로세스이다. 컴포넌트의 상태(state)나 프로퍼티(props)가 변경되었을 때 발생하며, 최소한의 작업으로만 변경된 부분을 업데이트하여 효율적인 렌더링을 구현한다.
또한 컴포넌트 간의 계층 구조를 따라 상위 컴포넌트부터 하위 컴포넌트까지 재귀적으로 수행된다. 이 과정은 react의 성능 최적화 및 불필요한 렌더링을 방지하는데 중요한 역할을 한다. 즉, 성능 최적화를 위해 사용되며, 불필요한 DOM 조작을 줄여준다.
렌더링(Rendering)
렌더링은 컴포넌트가 화면에 나타나는 내용을 생성하는 과정을 말한다. 컴포넌트의 상태나 프로퍼티가 변경되었을 때, react는 컴포넌트를 다시 렌더링하여 새로운 화면을 구성한다. 컴포넌트의 리렌더링은 state나 props가 변경되었을 때 발생하며, UI의 일관성을 유지하고 업데이트된 데이터를 반영하는 역할을 한다.
차이점?
react 15버전 까지는, 이러한 react의 두가지 작용이 혼합되어 작동하고 있었다. 이후, 독립된 역할을 수행하는 react 코어와 react Renderer 각각 분리되어 출시되었다.
-
React Core (React 코어)
React Core는 react의 핵심 기능을 담당하는 기본적인 react이다. 컴포넌트의 변화를 감지하고 업데이트하며 컴포넌트의 재조정과 같은 핵심 로직을 처리한다. -
React Renderer
실제 렌더링 엔진 역할을 한다.
이러한 변경 이후로, 재조정과 렌더링이 분리되었기 때문에 react는 DOM 뿐만 아니라 어떠한 것도 렌더링할 수 있게 되었다. 즉, react 코어의 컴포넌트 재조정 과정은 react 자체가 가지고 있고, 재조정된 컴포넌트를 렌더링하는 것은 DOM 이될 수도 있고 다른 것이 될수도 있다.
이 요점의 대표적인 예시는 바로 모바일 애플리케이션을 개발할 수 있도록 도와주는 React Native이다. React Navtive는 renderer가 브릿지를 통해서 native api (안드로이드의 java나 xml 등)로 변경할 수 있게끔 해준다. 3D 렌더링을 도와주는 React Three Fiber 도 있다.
재조정 ==> 렌더함수의 실행여부를 결정하는 역할
렌더링 ==> 재조정 과정으로부터 전달받은 결과를 바탕으로 화면 UI 구성을 그리는 역할
단, 한가지 주의할 점은 재조정을 통해 컴포넌트의 렌더 함수를 실행하더라도 렌더링이 무조건 일어난다는 것은 아니다. 바로 렌더링 최적화 로직이 적용된 경우이다. 최적화의 과정은 이곳에서 더 자세히 살펴보자
