렌더링과 리렌더링

렌더링

우선 렌더링을 알아보자. 렌더링이란 사용자 화면에 내용을 보여 주는 것이다. 초기 렌더링이란 어떠한 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 사용자 화면에 뷰를 보여주는 것을 초기 렌더링이라고 한다. 리액트에서는 렌더링을 다루는 render함수가 있다.

Render 함수

render 함수는 컴포넌트가 어떻게 생겼는지 정의하고, 화면의 구성과 작동 방식에 대한 정보를 지닌 객체를 반환한다. 초기 렌더링을 할 때의 과정은 아래와 같다.

초기 렌더링 과정 -> 내부 컴포넌트 정의 -> 컴포넌트의 정보를 이용해 렌더링 -> 문자열 형식의 html 코드 반환 -> 실제 페이지의 DOM요소 안에 주입하여 화면에 보여줌.

리렌더링

리렌더링은 단어 그대로 화면에 다시 보여준다라는 의미이다. ‘업데이트 과정을 거친다’정도로 표현 가능하다.

그렇다면 언제 리렌더링이 되는걸까.리렌더링이 되는 조건을 살펴보자.

• state 변경이 있을 때
• 새로운 props가 들어올 때
• 부모 컴포넌트가 렌더링 될 때
• shouldComponentUpdate에서 true가 반환될 때
• forceUpdate가 실행될 때

리렌더링은 상태가 변화할 때 발생한다!