728x90
(참고:해당 설명은 Vitrual Studio 프로그램 기준으로 설명합니다.)
다들 리액트로 개발하면서, 웹 콘솔창에 이유 없이 두 번의 상태값을 보신 적이 있을 겁니다. 어? 나는 아무것도 안 했는데? 이게 왜 뜨지라는 생각을 하였을 겁니다. 렌더링이 무엇이고, 개발 단계에서 두 번 발생하는지도 알아보겠습니다.
목록
- 렌더링이란?
- 렌더링 발생 두 번 그 이유는?
- 렌더링 발생 두 번 방지
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();
'IT개발 > React' 카테고리의 다른 글
[React] 오디오 이퀄라이저"EQ(Equalizer)"구현하기(@dschoon/react-waves라이브러리) - Vitrual Studio기준 (0) | 2023.08.30 |
---|