React로 비동기 함수 처리 질문

Question

import axios from "axios"; import { useState, useEffect } from "react"; export const useAdminRole = () => { const [isAdmin, setIsAdmin] = useState(false); useEffect(() => { const getAdminRole = async () => { try { const response = await axios.get(`${process.env.REACT_APP_ADMIN_URL}`, { headers: { Authorization: `Bearer ${localStorage.getItem("token")}` } }); setIsAdmin(true); } catch (error: any) { if (error.response && error.response.status === 401) { console.error('권한이 없습니다.') } else { console.error('오류가 발생했습니다.') } setIsAdmin(false); } }; getAdminRole(); }, []); return isAdmin; }; 백엔드로 토큰을 전송하여 해당 사용자가 관리자 권한이 있는지 확인하는 기능입니다.관리자가 아닐 시 에러가 발생하여 예외처리 됩니다.const Index = () => { const isAdmin = useAdminRole(); const navigate = useNavigate(); useEffect(() => { if (!isAdmin) { alert('권한이 없습니다'); navigate('/'); } }, [isAdmin, navigate]); return ( 슬라이드 공지사항 강의 ); } export default Index;관리자만 접속할 수 있는 관리자 페이지를 대강 구상했는데 isAdmin이 업데이트 되기도 전에 isAdmin의 초기값인 false로 처리해버려 유효성 검사를 제대로 할 수가 없네요..혹시 따로 해결방법이 있을까요?

w0w · Accepted Answer

useAdminRole 훅에서 로딩상태를 만들고관리자페이지의 useEffect에서 처리하면될거같습니다

풍월상신(가니메디안) · Answer

useAdminRole 은 비동기 fetch 작업을 수행하므로 비동기 펑션으로 선언되어야 합니다.useAdminRole() 의 호출 역시 await useAdminRole () 로 수정되어야 합니다.fetch 의 시작과 종료까지의 상태를 관리하는 state 를 두어 이를 전담하도록 해야 합니다.fetch 작업의 '성공결과' 만이 목적이 아닙니다. '실패결과' 까지 목적으로 두어야 합니다.const Index = () => { const [fetchIdle, setFetchIdle] = useState<boolean>(false); let isAdmin: boolean; ( async() => { setFetchIdle(true); try { isAdmin = await useAdminRole() } catch(e: Error) { // error handler } finally { setFetchIdle(false) } })();추가로, isAdmin 의 메모이제이션도 필요할 것입니다.

React로 비동기 함수 처리 질문

2개의 답변

Q&A 목록