[React] useEffect 무한 요청 해결

1. 문제

 1. 코드 상황

  1-1) 서버 쪽 코드

app.get("/list", (req, res) => {
  const sqlQuery = "SELECT * FROM DEVICES;";
  db.query(sqlQuery, (err, result) => {
    //res.send에 result를 보내지 않으면 안간다
    console.log("리스트 보낸당")
    res.send(result);
    
  });
});

1-2) 프론트 코드

import { Component } from "react";
import Table from "react-bootstrap/Table";
import Axios from "axios";
import { Button } from "react-bootstrap";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
import styled from "styled-components";
import react, { useState, useEffect } from "react";


function DevicesList() {
    // prop destruction
    const [DevicesList, setDevicesList] = useState([]);
    // lib hooks
  
    // state, ref, querystring hooks
    function Devices({ DEVICE_ID, DEVICE_NAME }: { DEVICE_ID: number; DEVICE_NAME: string; }) {

        getList();

        return (
          <tr>
            <td>{DEVICE_ID}</td>
            <td>{DEVICE_NAME}</td>
          </tr>
        );
    }
  
    // form hooks
  
    // query hooks

    function getList(){
        Axios.get("http://localhost:8000/list", {})
        .then((res) => {
            const { data } = res;
            setDevicesList(data);
            
        })
        .catch((e) => {
            console.error(e);
        })
    }


    function AddPageGo() {
        window.location.href = "http://localhost:3000";
    }
    // calculated values
    
    // effects
    
    1.
    useEffect(() => {
        setTimeout(() => {
            console.log("useEffect");
            getList();
        }, 1000);
    }, []);
    
    2. 
    getList();
    
    3.
    seEffect(() => {
        getList();
    }, []);

    // handlers
    
    
    return (
        <div>
             <TopWrapper>
                    <ListAndButtonWrapper>
                        <ListWrapper>
                            <Table striped bordered hover>
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>이름</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {
                                         DevicesList.map((v: any) => {
                                            return (
                                                <Devices
                                                    DEVICE_ID={v.DEVICE_ID}
                                                    DEVICE_NAME={v.DEVICE_NAME}
                                                ></Devices>
                                            );
                                        })
                                    }
                                </tbody>
                            </Table>
                        </ListWrapper>
                        <div>
                        <Button className="btn btn-primary" onClick={AddPageGo}>+ ADD</Button>
                        </div>
                    </ListAndButtonWrapper>
                </TopWrapper>   
        </div>
    )
  }

export default DevicesList;

• //effect 쪽에 위와 같이 여러 코드를 두어도 무한 반복요청이 가진다. 
• 3번으로 해결하였는데 잘 못된 이유는 Devices function에 getList()가 들어가 있어서 무한 반복 되고 있던 것이었다...

2. 결론

useEffect(() => {
        getList();
    }, []);

• 위 코드를 통해 렌더 시 한번만 불러오도록 기능을 구현했다.
• 이번에는 중복 코드로 오류가 발생했지만, 그렇지 않은 경우에 무한 요청이 발생하면 하단의 참조를 참고하자

 

2. 참조

 1)function component useEffect무한 요청 : https://velog.io/@ryong9rrr/componentDidMount-%EC%99%80-useEffect