[React] 두번씩 렌더링 되는 이유와 해결방법 #StrictMode

#문제

• 아래의 코드는 server를 통해 tests의 목록을 가져와 화면에 출력하는 예시이다 (server 쪽 코드는 생략)

import { useEffect, useState } from 'react';

export default function Test() {

    const [tests, setTests] = useState([]);

    useEffect(() => {

        fetch(`/api/tests`)
            .then(res => res.json())
            .then(data => {
                const newItem = data.map(element => element.test_nm);
                setTests(prevTests => [...prevTests, ...newItem]);
            })
            .catch(error => {
                console.error('오류 발생:', error);
            });
            
    }, []);

    return (
        <>
            {tests.map((data, index) =>{
                return <h1 key={index}>{data}</h1>
                }
            )}
        </>
    )
}

 

• 테이블에 담겨있는 값은 2개뿐인데 결과화면에서는 test001 test002 이 두 데이터가 2번씩 출력되는 것을 볼 수 있다

테이블 값

결과 화면

# 해결 방법

• 이 문제는 StrictMode 때문 → index.js에 있는 StricMode를 찾아 지워준다

#수정 전

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>
);

# 수정 후

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
  	<App />
  </BrowserRouter>
);

• 지워주고 난 후 결과를 보면 2번만 출력되는 것을 볼 수 있음

# StrictMode?

• StrictMode는 개발 모드에서만 동작하는 도구로 컴포넌트와 그 자식들에 대한 잠재적인 문제를 감지하고 경고를 발생시킴
• 렌더링을 두 번 수행하는 것처럼 보일 수 있음

[참고 : 리액트 공식 문서]