126. React fech 무한루프 TIL 23.02.10

---

 

fech 무한루프

.jsx파일로 외부데이터를 연결하기 위해 fetch를 사용했는데 무한루프가 걸렸다.
코드는 아래 코드처럼 작성함 

import React, { useEffect, useState } from 'react';

function Products() {

    const [products, setProducts] = useState([]);
    const [checked, setChecked] = useState(false);
    const handleChange = () => {
        return setChecked(prev => !prev)
    }

    fetch(`data/${checked ? 'sale_' : ''}products.json`)
        .then((res) => res.json())
        .then((data) => {
            setProducts(data)
        });
}

export default Products;

 

1. (Products())함수가 실행되면서 state를 초기화해줌
2. (fetch)네트워크에서 데이터를 받아온 다음 setProducts로 다시 state를 업데이트함
3. state를 변경하면 react에서는 다시 함수를 호출함

1~3 반복 무한루프 발생

 

 

해결 : useEffect

import React, { useEffect, useState } from 'react';

function Products() {

    const [products, setProducts] = useState([]);
    const [checked, setChecked] = useState(false);
    const handleChange = () => {
        return setChecked(prev => !prev)
    }

    useEffect(() => {
        fetch(`data/${checked ? 'sale_' : ''}products.json`)
            .then((res) => res.json())
            .then((data) => {
                setProducts(data)
            });
            return () => {
                console.log('클린')
            }
    }, [checked])
}

 

 

(추가더보기):https://jacobgrowthstory.tistory.com/51

[React] useEffect 무한루프 탈출 (에러핸들링)