[React] 개발 단계에서 렌더링 두 번 발생 원인 및 방지 방법

(참고:해당 설명은 Vitrual Studio 프로그램 기준으로 설명합니다.)

 

다들 리액트로 개발하면서, 웹 콘솔창에 이유 없이 두 번의 상태값을 보신 적이 있을 겁니다. 어? 나는 아무것도 안 했는데? 이게 왜 뜨지라는 생각을 하였을 겁니다. 렌더링이 무엇이고, 개발 단계에서 두 번 발생하는지도 알아보겠습니다.

목록

1. 렌더링이란?
2. 렌더링 발생 두 번 그 이유는?
3. 렌더링 발생 두 번 방지

 

1. 렌더링이란?

• 웹 개발 관점에서의 렌더링은 웹 개발에서는 주로 "웹 페이지 UI를 생성"하고 "표시하는 과정"을 "렌더링"이라고 합니다. 사용자가 웹 페이지에 접속하거나 상호작용할 때, 브라우저는 웹 페이지의 구조와 스타일을 기반으로 화면에 내용을 그리는 렌더링 과정을 거칩니다.
• 간다히 말씀드리자면, 우리가 웹 브라우저를 열어 웹 사이트를 보면, 웹 페이지의 모양과 내용이 화면에 그려지는 것이 웹 개발에서의 렌더링입니다.

 

• 렌더링 과정은 주로 세 가지 언어를 사용하는데요.
  HTML: 웹 페이지의 내용과 구조를 설명해요. 제목, 문단, 이미지 등등이 있고,
  CSS: 웹 페이지의 스타일을 정의해요. 색상, 폰트, 레이아웃 등을 다루는 역할이고,
  JavaScript: 웹 페이지의 동작을 추가하거나 사용자와 상호작용하는 기능을 만들 수 있게 해줍니다.
• 웹 브라우저는 이 세 가지 언어를 이해하고 실행하여 웹 페이지를 화면에 그려줍니다.

 

2. 렌더링 발생 두 번 그 이유는?

• 렌더링 두 번 발생의 원인은 index.js 파일의 <React.StrictMode> 컴포넌트입니다. 

<React.StrictMode>
</React.StrictMode>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

• 여기서 <React.StrictMode> 컴포넌트는 "리액트의 엄격한 모드(React Strict Mode)"로, 애플리케이션 내의 잠재적인 문제를 감지하고 경고를 출력합니다. 엄격한 모드에서는 컴포넌트의 초기 렌더링을 두 번 수행하는데,

 

1차 렌더링 (First Render)

• 사실, 첫 번째 렌더링에서는 실제로는 아무것도 일어나지 않습니다. 그냥 컴포넌트를 '안전하게' 확인하는 단계일 뿐입니다. 처음 ReactDOM.render() 함수가 호출되면, <App /> 컴포넌트가 그려집니다. 이때, 개발 환경에서는 두 번 렌더링 됩니다. 두 번째 렌더링은 완전한 화면을 만들지 않고, 단순히 컴포넌트를 이해하고 나중에 발생할 수 있는 문제를 잡아내려고 합니다. 

2차 렌더링 (Second Render)

• 그러고 나서, 첫 번째 렌더링이 끝나면 컴포넌트가 다시 렌더링 됩니다. 이때, 컴포넌트의 상태(props)가 바뀌었거나, 다른 변화가 있는지 확인합니다. 만약 문제가 있거나 부작용이 발생할 수 있는 부분을 발견하면, 여기서 경고를 띄워줍니다. 이렇게 두 번째 렌더링은 개발자에게 문제가 될 수 있는 부분을 알려주고, 나중에 더 좋은 방법으로 수정하게 도와줍니다.
• 그러므로, 두 번의 렌더링이 발생하는 것은 주로 개발 환경에서만 보이는 엄격한 모드의 동작입니다. 실제로 배포 환경에서는 두 번째 렌더링은 발생하지 않습니다. 엄격한 모드의 목적은 개발 중에만 잠재적인 문제를 조기에 감지하여 디버깅을 도와주는 것입니다.

 

3. 렌더링 발생 두 번 방지

• 어? 그렇다면 React Strict Mode를 제거하면 한 번만 렌더링 하지 않을까? 맞습니다. 그냥 제거하면 웹 페이지는 한 번만 렌더링을 합니다.

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <App />
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();