[FE][!ERRO]Too many re-renders. React limits the number of renders to prevent an infinite loop.

 

json-server api를 담당하고 있던 useEffect를 커스텀 훅으로 만들어 관리하기 위해서 분리하던 도중에 발생한 에러이다. Too many re-render 에러가 발생하는 이유는 대표적으론 uesEffect에 의존성 배열을 삽입하지 않았을 경우에 발생한다. 하지만 나의 경우 커스텀 훅에는 useEffect의 의존성 배열이 문제 없이 잘 삽입 되어 있다. 그렇다면 현재 커스텀 훅의 문제가 아니라 커스텀 훅을 불러오는 컴포넌트(LabExam)에 문제가 있다고 판단했다. 아래 코드는 나의 커스텀 훅이다.

* useLabExamAxios.js

 

import { useState, useEffect } from "react";

import axios from 'axios';

export default function useLabExamAxios(limit) {

  const [data, setData] = useState([]);

  useEffect(() => {

    axios.get('http://localhost:3001/sample')

      .then(res => {

        setData(res.data.slice(0, limit));

      })

      .catch((error) => {

        console.error("Error fetching data:", error);

      });

  }, [limit]);

  return data;

}

 

## 커스텀 훅이란?

### 훅인란?

### 커스텀 훅이란?

현재 useLabExamAxios를 불러오는 컴포넌트에서 useState가 useLabExamAxios와 동일하게 두번 요청이 되고 있다. 아래 코드는 useLabExamAxios를 불러오는 컴포넌트의 코드이다.

 

import React, { useState } from "react";

import { Link } from "react-router-dom";

import "../css/style.css"

import useLabExamAxios from "../function/useLabExamAxios";

import useAxios from "../function/useAxios";

import shuffleArray from '../function/shuffleArray'

import { renderImages, parseImages } from '../function/renderImages'

export default function LabExam() {

  const [data, setData] = useState([]);

  const [limit, setLimit] = useState(5);

  const [isCommentary, setIsCommentary] = useState(false); //답안지 상태관리

  const testData = useLabExamAxios(limit)

  setData(testData);

  ...

 

이는 즉, 외부에도 내부에도 useState가 여러번 렌더링이 되고 있다는 것을 알 수 있다. 이는 무한 렌더링을 발생 시킬 수 있다. 따라서 외부, 내부에 useState가 하나만 존재 해야 한다는 것이다. 또는 외부에 있는 useState를 한번 불러올 수 있게 코드를 작성해야한다. 변경된 코드는 아래와 같다.

 

 ...

import useLabExamAxios from "../function/useLabExamAxios";

import shuffleArray from '../function/shuffleArray'

import { renderImages, parseImages } from '../function/renderImages'

export default function LabExam() {

  const [data, setData] = useState([]);

  const [limit, setLimit] = useState(5);

  const [isCommentary, setIsCommentary] = useState(false); //답안지 상태관리

  const testData = useLabExamAxios(limit);

  useEffect(() => {

    setData(testData);

  }, [testData]);

  ...

 

이렇게 코드를 작성하게 된다면 과연 커스텀훅이 맞는 것일까? 따로 함수로 만들어내는 목적은 가독성을 높이기 위함인데 이렇게 코드를 작성하게 된다면 외부와 내부에서 이중적으로 useEffect를 사용하는 것이기에 가독성이 떨어진다. 따라서 커스텀 훅을 만드는 방법보다는 외부에 useEffect를 유지한 상태로 내부에 있는 Axios만 따로 함수로 분리하고 외부에 useEffect를 유지하는 편이 가독성을 높인다고 판단이 된다. 이에 따라 더 이상 커스텀 훅이 아니기 때문에 파일 명도 use를 제외해서 다시 수정 했다. 수정된 코드는 아래와 같다.

* labExamAxios.js

 

import axios from 'axios';

export default function labExamAxios(limit, setData) {

  axios.get('http://localhost:3001/sample')

    .then(res => {

      setData(res.data.slice(0, limit));

    })

    .catch((error) => {

      console.error("Error fetching data:", error);

    });

}

 

외부 컴포넌트에 useEffect를 유지하고 내부 컴포넌트에는 axios만 분리한 모습이다. 외부 컴포넌트는 import를 해오고 아래와 같이 구성했다.

 

  useEffect(() => {

    labExamAxios(limit, setData)

  }, [limit]);

 

---

# suffleArray 함수 / handleShuffle 함수 분리 중 발생한 Too many re-render 에러

axios에 이어 suffleArray를 분리하는 도중에도 발생이 되었다. 하지만 생각보다 간단한 이유였다. 우선 분리된 함수들은 아래와같다. 

* shuffleArray.js

 

// shuffleArray(Fisher-Yates) 알고리즘을 사용하여 배열을 섞는 함수

export function shuffleArray(arrayItem) {

  for (let i = arrayItem.length - 1; i > 0; i--) {

    const j = Math.floor(Math.random() * (i + 1));

    [arrayItem[i], arrayItem[j]] = [arrayItem[j], arrayItem[i]];

  }

  return arrayItem;

}

// 문제를 섞는 함수를 호출하는 버튼 클릭 핸들러

export function handleShuffle(data, setData) {

  const shuffledData = shuffleArray(data);

  setData([...shuffledData]); // 새로운 배열로 설정하여 React가 업데이트를 감지할 수 있게 함

  return shuffledData;

};

 

이에 적용된 외부 컴포넌트는 아래와 같다.

 

  ...

<button onClick={handleShuffle(data, setData)}>Shuffle</button>

  ...

 

여기에서 문제가 발생된 것이다. 원래 onClick를 사용하게 되면 함수의 괄호'()'를 사용하지 않고 함수 명만 작성해야한다. 하지만 handleShuffle함수가 매개변수를 가지게 되면서 무한으로 클릭되고 있는 것이였다. 따라서 다시 한번 화살표기 함수로 감싸줘야 한다. 수정된 코드는 아래와 같다.

 

  ...

<button onClick={() => handleShuffle(data, setData)}>Shuffle</button>

  ...

 

이렇게 코드를 수정해주면 모든 무한 렌더 에러는 사라지게되고 안전하게 코드를 분리할 수 있게 되었다.