백엔드 데이터를 가져오는데 무한 랜더링이 걸리는 이유

Louis·2023년 12월 12일

안녕하세요!
모두들 잘 지내셨나요? 저는 프로젝트 끝내고 아직 컨디션이 안돌아와서 적응을 하면서 공부를 진행하고 있습니다...ㅎ

그래도! 다시 정신을 차리려고 노력하면서
이렇게 리액트 개념을 가지고 왔습니다!

그럼 바로 시작해보겠습니다...!!

예시코드

(서버 코드는 따로 언급하지 않습니다)

import { useEffect, useState,Fragment } from "react";
import axios from "axios";

function App() {
  const [products, setProducts] = useState([]);

  const getProducts = async () => {
    const response = await axios.get(`http://localhost:3001/products`);
		// App 컴포넌트 실행 -> 데이터가져오기() -> set상품들 실행 -> App 컴포넌트 다시 실행 -> 데이터가져오기() -> set상품들 실행
    // -> App 컴포넌트 다시 실행 -> 데이터가져오기() -> set상품들 실행
    setProducts(response.data);
    console.log("데이터 요청하는 중!");
  };
  getProducts();

  return (
    <>
      {products.map((product, idx) => {
        return (
          <Fragment key={product.id}>
            <div>순서: {idx + 1}</div>
            <div>상품명: {product.name}</div>
            <div
              style={{
                color: "red",
              }}
            >
              가격: {product.price}
            </div>
            <hr></hr>
          </Fragment>
        );
      })}
    </>
  );
}

export default App;

위와 같은 코드가 있을 때 서버를 실행시키면 무한 랜더링에 걸리게 됩니다 그러면 우리는 엄청난 데이터들을 송수신 하는 상태가 되어 버리는데요

이럴 때 개인 서버라면 상관이 없겠지만 유로로 서버를 구축하는 곳은 송수신 하나하나가 돈이 되어버리고 소중하기 떄문에 늘 조심을 해야됩니다

그럼 왜 무한 랜더링이 되는지에 대해 알아보도록 하겠습니다

왜 랜더링이 발생하나요?

왜 랜더링이 발생하는지에 알기 위해서는 React 특성에 대해 알아볼 필요가 있습니다

React의 특성은 상태 기반으로 상태가 바뀌면 자동으로 랜더링이 되는 특성을 가지고 있습니다

그래서 위의 코드에서 getProducts(); 코드로 products 의 상태를 바꿔주는 시도를 계속해서 하기 때문에 무한 랜더링이 일어나는 것입니다

조금 더 쉬운 예시는 없을까요?

import { useState } from "react";


function App() {
	const [count, setCount] = useState(0);

	return (
		<div>
			<p>Count: {count}</p>
			<button onClick={() => setCount(count + 1)}>증가</button>
		</div>
	);
}

export default App;

이런 기본적인 버튼 코드가 있을 때 우리는 onClick을 통해서 count의 값을 바꿔주게 되죠

이 코드를 onclick을 사용하지 않고 직접 호출을 하게 되면 어떻게 될까요?

import { useState } from "react";


function App() {
  const [count, setCount] = useState(0);

  const autoClick = () => {
    setCount(count + 1);
    console.log('안녕 리액트');
  };

  autoClick();

  return (
    <div>
      <p>Count: {count}</p>
      <button>증가</button>
    </div>
  );
}

export default App;