버튼을 누르면 숫자가 올라가는 간단한 코드를 작성했다. 언제 페이지 렌더링이 일어나는지 확인하기 위해 console.log("render");
를 찍었고, console에 log가 두 번씩 출력되는 것을 확인할 수 있었다.
// ./src/App.js
import { useState } from "react";
function App() {
const [counter, setCounter] = useState(0);
const onClick = () => setCounter((prev) => prev + 1);
console.log("render");
return (
<div>
<h1>Welcome!</h1>
<h2>{counter}</h2>
<button onClick={onClick}>Click me</button>
</div>
);
}
export default App;
왜 두 번씩 찍힐까?
먼저 왜 두 번씩 찍히는지 원인부터 알아보았다. 나 뿐만이 아니라 많은 사람들이 의문을 가졌기 때문에 쉽게 구글링을 통해 알 수 있었다. 원인은 <App />
컴포넌트를 렌더링하는 render()
함수가 있는 ./src/index.js
파일에서 찾을 수 있었다.
리액트 프로젝트를 생성할 때, create-react-app
커맨드를 이용하여 생성하는데, 이때 자동으로 생성되는 ./src/index.js
파일을 확인해보면 render()
함수 내에 <App />
컴포넌트가 <React.StrictMode> </React.StrictMode>
로 감싸져 있는 것을 볼 수 있다.
// ./src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
이 <React.StrictMode>
를 지워주면 console에 log가 한 번만 찍히는 것을 확인할 수 있다. 그래서 React.StrctMode
가 무엇인지 공식문서를 통해 간단하게 알아보고자 했다.
StrictMode의 역할
StrictMode
는 리액트 어플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이다. StrictMode
를 사용하면 아래와 같은 개발 전용 동작이 활성화된다. StrictMode
는 개발 모드에서만 활성화되는 기능이며, 프로덕션 빌드에는 영향을 미치지 않는다.
- 불완전한 렌더링으로 인한 버그를 찾기 위해 한 번 더 렌더링한다.
- Effect cleanup이 누락되어 발생한 버그를 찾기 위해 Effect를 한 번 더 실행한다.
- 지원 중단된 API의 사용 여부를 확인한다.
StrictMode
가 활성화되어 있어 위 코드에서 한 번 더 렌더링되면서console.log()
가 두 번씩 실행된 것이다.
StrictMode
는 어느 위치에 있느냐에 따라 활성 범위를 제한할 수 있다. 전체 어플리케이션에 대해 활성화하는 경우, render()
함수 내에서 루트 컴포넌트를 <StrictMode>
로 감싸면 된다.
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(
<StrictMode>
<App />
</StrictMode>
);
어플리케이션의 일부에서만 StrictMode
를 활성화하는 경우, 활성화를 원하는 컴포넌트만을 <StrictMode>
로 감싸면 된다.
import { StrictMode } from 'react';
function App() {
return (
<>
<Header />
<StrictMode>
<main>
<Sidebar />
<Content />
</main>
</StrictMode>
<Footer />
</>
);
}
위 코드의 경우 Header
와 Footer
컴포넌트에 대해서는 StrictMode
가 활성화되지 않으며, Sidebar
와 Content
컴포넌트에 대해 StrictMode
가 활성화된다.
공식문서에 따르면, StrictMode
는 아래와 같은 항목들을 확인한다. (React v18.2.0 기준)
- 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
- 레거시 문자열 ref 사용에 대한 경고
- 권장되지 않은 findDOMNode 사용에 대한 경고
- 예상치 못한 부작용 검사
- 레거시 context API 검사
- 재사용 가능한 state의 보장 (Ensuring reusable state)
Reference
1. https://ko.legacy.reactjs.org/docs/strict-mode.html#ensuring-reusable-state
2. https://react-ko.dev/reference/react/StrictMode
React를 이제 배우기 시작한 입장이라 공식문서의 모든 내용을 이해하는 건 불가능했다. 하지만 프로젝트를 진행한다면 StrictMode
는 매우 유용하게 사용될 것이라는 것은 알 수 있었다.
공부하는 입장에서는 두 번씩 렌더링이 진행되어 불편하다면 StrictMode
를 지우고 실행하면 될 것 같다.
'Development > React' 카테고리의 다른 글
리액트 | styled-components를 이용한 React 스타일링 (with. styled-reset) (0) | 2024.01.29 |
---|---|
리액트 | Vite를 이용한 React 프로젝트 생성 (설치부터 프로젝트 생성까지) (0) | 2024.01.25 |
리액트 | 리액트 프로젝트 GitHub page로 배포하기 (0) | 2024.01.17 |
리액트 | useState Hook 간단하게 이해하기 (0) | 2024.01.15 |
리액트 | create-react-app을 이용한 리액트 프로젝트 생성 (0) | 2024.01.03 |