인프런 커뮤니티 질문&답변
작성한 질문수
부수 효과 비동기
작성
·
117
1
// 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 훅의 기능과 중복이 됩니다.
조금 더 깔끔한 방법이 없을까 궁급하니다.
답변 2
1
이재승
지식공유자
좋은 최적화 포인트네요 👍
state.auth.status 값을 필요한 곳에서 사용하는 게 이상한 것 같지는 않습니다.
useNeedLogin 의 역할은 `미로그인 시 로그인 페이지로 이동` 이라고 할 수 있는데요
아래처럼 if 문을 추가한 것이 기능 중복이라고 보기는 힘들 것 같아요
if (status === AuthStatus.Login) {
dispatch(actions.fetchAllHistory());
}
좀 다른 얘기지만, 로그인 상태에서만 함수를 호출해주는 useEffectOnLogin 훅을 만들어서 사용하는 방법도 괜찮아 보입니다.
useEffectOnLogin(() => {
dispatch(actions.fetchAllHistory());
}, [dispatch]);
0
