React JS 렌더링,리렌더링

렌더링이란?

리액트에서 랜더링이란 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지 컴포넌트에게 작업을 요청하는 것을 의미.

여기서 컴포넌트란? 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위를 말함

컴포넌트로 나누는 것은 코드 베이스를 작고 관리 가능한 단위로 유지 할 수 있게 도와주는데 이 작업은 코드 유지 보수가 쉬워지게 됨

렌더링이 일어나는 동안, 리액트는 컴포넌트의 루트에서 시작하여 아래쪽으로 쭉 훑어 보면서, 업데이트가 필요하다고 플래그가 지정되어 있는 모든 컴포넌트를 찾음

전체 컴포넌트에서 렌더링 결과물을 수집하고, 리액트는 오브젝트 트리(가상돔)와 비교하며, 실제 DOM을 의도한 출력처럼 보이게 적용해야 하는 모든 변경 사항들을 수집한다. (이렇게 비교하고 계산하는 과정을 리액트에서는 reconciliation 이라고 함

이 과정 다음엔 리액트는 계산된 모든 변경사항을 하나의 동기 시퀀스로 DOM에 적용

기본적인 리액트의 렌더링 개념은 루트(

) DOM부터 시작해 플래그가 지정되어 있는 모든 컴포넌트를 찾아서 렌더링을 진행하는 것

기본적으로 리액트의 렌더링은 이러한 DOM 엘리먼트를 ReactDOM.createRoot()에 전달한 다음, 그 React Element를 root.render()에 전달하는 과정을 거칩니다.

리렌더링이란?

리액트에선 초기에 한번 렌더링을 진행하고, 그 이후에 특정 조건이 발생하면 다시 렌더링을 진행하는 것

컴포넌트가 리렌더링 되는 조건

• 내부 상태(state) 변경시
• 부모에게 전달받은 값(props) 변경시
• 중앙 상태값(Context value 혹은 redux store) 변경시
• 부모 컴포넌트가 리렌더링 되는 경우