[React] 컴포넌트 리렌더링(Re-Rendering) 조건

 

 

 

 

 

React의 렌더링 최적화를 필수적으로 해야하는 프로젝트를 하다보니 React에서 리렌더링을 하는 조건에 대해 자세히 공부하게 되었다. 

 

 

 

 

렌더링(Rendering)이란?

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

 

리렌더링(Re-Rendering)이란?

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

 

 

 

그렇다면 언제 컴포넌트가 다시 렌더링 되는지 알아보자.

 

 

 

1. state가 변경되었을 때

react에서는 데이터를 관리하기 위해 useState 훅을 이용한다. 이때 상태 값을 변경하기 위해서 state를 직접 조작하는게 아닌 setState() 메서드를 사용해야한다. 리액트는 state 변경이 감지 되었을 때 리렌더링을 하는데, 직접 조작할 경우 리액트가 state의 변경을 감지하지 못하기 때문이다. 

 

2. 전달 받은 props가 업데이트 되었을 때

상위에서 전달받은 props 값이 업데이트 되었을 경우 리렌더링 된다.

 

3. 부모 컴포넌트가 렌더링 될 때

props가 업데이트 되지 않더라도 부모 컴포넌트가 리렌더링 된다면 자식 컴포넌트 또한 리렌더링 된다.

 

4. forceUpdate 함수가 실행될 때 (React 클래스형 컴포넌트에서만 사용 가능)

props 나 state가 아닌 다른 값이 변경되었을 때 강제로 리렌더링을 시킬 수 있는 메서드이다. 

forceUpdate() 메서드를 사용하는 경우 위 세 가지 중 하나에 충족하지 않더라도 리렌더링 된다.