리랜더링?🧐

작성하게된 계기

리액트를 사용하며 강의를 들을때 리렌더링 이란 말을 자주 들었는데 그게 뭔지 몰랐지만 크게 중요하지 않다 생각하고 진행을 하게 되었다. 하지만 자주 나오는 단어인 만큼 알아두면 좋을것 같아서 블로그작성을 하며 알게된 것들을 정리하려고 마음을 먹었다.

랜더링이란?

• 사용자 화면에 View(내용)를 보여주는 것을 렌더링이라고 한다.
• React엘리먼트를 루트 DOM노드에 렌더링 하려면 둘다 ReactDOM.render()로 전달하면 된다.
• 초기 렌더링이란 어떠한 UI관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 사용자 화면에 뷰를 보여주는 것을 초기 렌더링이라고 한다. 리액트에서는 렌더링을 다루는 render함수가 있다.

Render 함수의 특징

1. 컴포넌트를 정의한다.
2. 뷰의 모양새와 작동 방식에 대한 정보를 지닌 객체를 반환한다.
   ( render()함수는 html형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 동작하는지에 대한 정보를 지닌 객체를 반환한다.)
3. 내부 컴포넌트 재귀적 렌더링이 가능하다.(컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있어, render 함수가 실행되면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 된다.)

어떤 식으로 동작하는가?

초기 렌더링을 할 때 과정은 다음과 같다 -> 내부 컴포넌트 렌더링을 시작으로 최상위 컴포넌트와 내부 컴포넌트들을 렌더링함.(내부 to 최상위) -> 최상위 컴포넌트 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML마크업을 만든다. -> 실제 페이지의 DOM요소 안에 주입후 DOM을 사용자 화면에 나타낸다.

• Render 함수는 가상 돔 계층에서 아래와 같이 순서대로 호출된다. (리액트 엘리먼트 렌더 순서 )
  : App -> Parent -> Child
• 리액트 엘리먼트는 계층의 맨 아래부터 반대 순서로 마운트 된다. (리액트 엘리먼트 마운트 순서 )
  : Child -> Parent -> App

리랜더링이란?

• 리렌더링은 사용자가 화면에 뷰를 다시 새롭게 보여준다는 의미인데 이것을 업데이트 과정을 거친다. 또는 조화 과정을 거친다 라고 표현한다.
• 리액트에서 뷰(View)를 업데이트할 때는 "업데이트 과정을 거친다" 보다는 조화 과정을 거친다 라고 표현하는 것이 더 정확하다. 왜냐하면 컴포넌트에서 데이터에 변화가 있을 때 우리가 보기에는 변화에 따라 뷰가 변형되는것 처럼 보이지만, 사실 새로운 요소로 갈아 끼우기 때문이다.

컴포넌트가 리랜더링 되는 경우

• 자신의 상태가 변경될 때
• 부모 컴포넌트가 리렌더링 될 때
• 자신이 전달받은 props가 변경될 때
• forceUpdate 함수가 실행될 때

리랜더링 정리

• 리렌더링이라는 것은 렌더링이 다시 발생하는 것이다. 렌더링이라는 것은 화면상에 뷰(내용)를 보여주는 것이다.
• 리액트에서 리렌더링은 상태가 변화할 때 발생하는데 Virtual DOM에서 변경된 혹은 업데이트된 내용을 이전 값과 비교하여 변경된 값에 대해 렌더링을 해주는 (DOM 트리를 업데이트해주는) 것을 의미한다.