setLoading 은 어디에 위치해야 할까? try 문 안에? 밖에!?

react-spinners 를 사용하여 로딩 중인 상태를 개발하며 지피티랑 씨름하다가 생긴 궁금증.!

 

useEffect 안에서 setLoading(true) 는 try 문 안에서 사용해야 할까? 밖에서 사용해야 할까?

차이점이 무엇일까

 

 

🔽 try 문 안에서 사용하는 경우 🔽

const [data, setData] = useState('');
const [loading, setLoading] = useState(true);

useEffect(() => {
  const fetchData = async () => {
    try {
      setLoading(true);
      const dataResponse = await api.get('/data');
      setData(dataResponse.data);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };
  fetchData();
}, []);

 

장점 : 네트워크 요청이 시작되기 전에 setLoading(true)가 호출되어 로딩 상태가 항상 네트워크 요청이 시작되기 전에 설정된다.

단점 : fetchData 함수가 호출될 때 로딩 상태가 설정되지 않으면 네트워크 요청이 시작되기 전에 로딩 상태가 표시되지 않을 수 있다.

 

 

🔽 try 문 밖에서 사용하는 경우 🔽

const [data, setData] = useState('');
const [loading, setLoading] = useState(true);

useEffect(() => {
  const fetchData = async () => {
    setLoading(true);
    try {
      const dataResponse = await api.get('/data');
      setData(dataResponse.data);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };
  fetchData();
}, []);

 

장점 : setLoading(true) 가 fetchData 함수가 호출될 때 즉시 실행되어, 로딩 상태가 즉시 표시된다.

fetchData 함수가 실행되기 전에 로딩 샅태를 설정한다.

 

단점 : 네트워크 요청이 시작되기 전에 로딩 상태가 표시되지 않을 수 있다.

 

---

 

위에 작성해둔 장단점은 지피티가 알려준 건데, 결론은 try 문 밖에 위치하는 게 맞는 것 같다!

 

try 문 안에 있으면 네트워크 요청을 해야 로딩 중 창이 뜬다는 건데, 네트워크 요청이 느려질 경우에는 또 그 기다리는 시간동안의 처리를 해주어야 하기 때문에 ..!!!

 

시간이 많이 오래걸린다면 따로 설정해주어 요새 ux 좋은 그런거처럼 네트워크 요청중 데이터 불러오는 중 알려줘도 좋겠지만, 내가 개발하는 사이트는 많이 오래걸리지 않기 때문에 사용자가 네트워크 기다리는지 정보 받아오는지 같은 tmi 를 1-2초 안에 볼 필요는 없다고 생각된다 ㅎㅎ

 

오늘의 궁금증 해결 끗.