[React] useReducer sencond parameter 오류

장동현·2021년 1월 13일
0

React

목록 보기
2/11
post-thumbnail
function useAsync(callback, deps = [], skip = false) {
  const [state, dispatch] = useReducer(reducer, {
    loading: false,
    data: null,
    error: false,
  });

  const fetchData = useCallback(async () => {
    dispatch({ type: 'LOADING' });
    try {
      const data = await callback();
      dispatch({ type: 'SUCCESS', data });
    } catch (e) {
      dispatch({ type: 'ERROR', error: e });
    }
  }, [callback]);

  useEffect(() => {
    if (skip) {
      return;
    }
    fetchData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);

  return [state, fetchData];
}

위와 같은 reducer를 사용한 코디에서 error 값이 false가 아닌 null로 설정 되어 있으면
다른 코드들은 정상 작동을 하지만 skip=true 라는 버튼을 만들어준 코드는 동작하지 않게 된다.
error 값이 null인 경우는 논리연산자의 경우에서는 false로 동작한다고 알 고 있는데 이 함수에서는 논리연산자로 작동하지 않는다고 보면 될 것 같다.
좀 더 주의 깊게 사용할 필요가 있다고 판단이 된다.

초기값 설정을 바르게 해줄 필요 있음

profile
FE 개발자 장동현 입니다 😃

0개의 댓글