부수 효과 비동기

Question

// useNeedLogin.js export default function useNeedLogin () { const history = useHistory () ; const status = useSelector ( ( state ) => state . auth . status ) ; useEffect ( () => { if ( status === AuthStatus . NotLogin ) { history . replace ( " /login " ) ; } }, [ status , history ]) ; } // Search.js export default function Search () { useNeedLogin () ; const history = useSelector ( ( state ) => state . search . history ) ; const dispatch = useDispatch () ; useEffect ( () => { dispatch ( actions . fetchAllHistory ()) ; }, [ dispatch ]) ; search 컴포넌트와 useNeedLogin 훅이 위와 같이 작성되어 있습니다.  이 경우에 Search 컴포넌트 랜더링 시에 fetchAllHistory가 실행이 되어 /history api를 호출합니다. useNeedlogin의 useEffect와 Search 컴포넌트의 useEffect가 비동기로 호출되면서 useNeedLogin의 redirect가 호출되기 전에 dispatch가 호출이 되어 그런 것이라고 생각합니다. state.auth.AuthStatus가 Login인지를 확인하는 로직을 Search 컴포넌트의 useEffect 내에 넣어 해결할 수 있었지만, useNeedLogin 훅의 기능과 중복이 됩니다. 조금 더 깔끔한 방법이 없을까 궁급하니다.

이재승 · Answer

좋은 최적화 포인트네요 👍 state.auth.status 값을 필요한 곳에서 사용하는 게 이상한 것 같지는 않습니다. useNeedLogin 의 역할은 `미로그인 시 로그인 페이지로 이동` 이라고 할 수 있는데요 아래처럼 if 문을 추가한 것이 기능 중복이라고 보기는 힘들 것 같아요 if ( status === AuthStatus . Login ) { dispatch ( actions . fetchAllHistory ()); } 좀 다른 얘기지만, 로그인 상태에서만 함수를 호출해주는 useEffectOnLogin 훅을 만들어서 사용하는 방법도 괜찮아 보입니다. useEffectOnLogin (() => { dispatch ( actions . fetchAllHistory ()); }, [ dispatch ]);

이워낙 · Answer

답변 감사합니다.