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();
}, []);

 

🔽 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();
}, []);

 

---

 

실질적으로 거의 차이가 없다.

동기 코드 위치만 다를 뿐, 네트워크 시작 타이밍과는 상관이 없음

 

JS 실행 흐름

 

• setLoading(true) 실행 (동기)
• await api.get(...) 도달
• 이때 네트워크 요청 시작
• Promise 대기
• 결과/에러
• finally

그렇지만, try 밖에 두는게 읽기 좋고 의도가 명확하다.!

 

함수 시작하면 로딩 시작, 성공 / 실패 상관없이 끝나면 로딩 종료를 안내한다

 

try 안에 두는 경우는 의도적 예의 케이스일 때 사용한다

조건이 안 맞으면 로딩 자체를 안 걸고 싶을 떄, 여러 요청 중 일부만 로딩에 포함시키고 싶을 때 등..

 

 

+ 로딩 UI 관련

 

• 300ms 이하 → 로딩 안 보여줌
• 500ms~ → 스켈레톤
• 1초 이상 → 스피너 + 문구