👩‍💻/React

[React.js Hooks] React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-deps issue

한나 2021. 3. 9. 04:02

문제 상황

useEffect를 쓰면서 자주 만나는 에러 핸들링을 해보자.

문제 원인 및 해결

useEffect는 클래스 컴포넌트에서 componentDidMount()와 componentDidUpdate() 라이프 사이클 메소드 두 개를 합친 역할을 한다고 배웠다. 따라서, useEffect 함수의 두 번째 인자에 빈 배열을 넣거나, 업데이트 하고자 하는 state를 넣어주어 렌더링의 횟수를 제한해주어야 하는데, 위 에러는 해당 state가 빠졌거나, 잘못 들어갔거나 해서 나오는 에러이다.

문제의 원인이 된 코드는 App.js와 Snackbar.js 컴포넌트에서였다. App.js에서는 Redux를 통해 반응형 컴포넌트 빌딩을 위해 size를 store에 등록해주기 위해 리팩토링을 하다가 생겼다.


function App() {
  const dispatch = useDispatch();
  let [currentSize, setCurrentSize] = useState('')

  useEffect(() => {
    dispatch(changeSize(currentSize))
  }, [dispatch, currentSize])

  return (  
      <Grommet id='container' theme={theme}>
        <ResponsiveContext.Consumer>{
          size => { setCurrentSize(size)
            return (
              <>
                <Box>
                  <Header channel={myMedia} theme={theme} />
                </Box>
                <Body channel={myMedia} />
                <Footer channel={myMedia} />
              </>
            )
          } 
        }
        </ResponsiveContext.Consumer>
      </Grommet>
  );
}

Grommet이 제공하는 <ResponsiveContext.Consumer>는 String을 통해 size를 반환한다. 커스텀 theme을 통해서 세밀하게 breakpoints를 조정할 수 있어서, 모든 반응형 사이즈 데이터는 이곳에서 받아 사용 중이다. 하지만 nested components를 계속 props로만 전달하는 것에 한계를 느껴서 redux를 도입했다. 문제는 <ResponsiveContext.Consumer> 컴포넌트로부터 size를 dispatch 해야 하는데,

  useEffect(() => {
    dispatch(changeSize(currentSize))
  }, [currentSize])

dispatch를 적용하지는 않고, currentSize만 감지하도록 해둬서 에러가 발생했다.
배열에 dispatch를 함께 넣어서 해결할 수 있었다. 이런 에러는 useEffect 내부에 함수를 정의한 경우 발생할 수 있다.

// snackbar.js
 useEffect(() => {
        if (props.barStatus === '') {
            setOpen(false);
        } else {
            onOpen();
            setStatus(props.barStatus);
        }
    }, [setOpen, setStatus, props])

다른 코드에서도 동일한 문제였다. 여기에서는 setOpen이 false라는 값을 가지고 있으므로, 배열에 등록해주어야 하고, setStatus도 마찬가지다. 업데이트가 되는 state 그 자체인 props도 배열에 등록해준다.

'👩‍💻 > React' 카테고리의 다른 글

[react-router-dom] React Router v6에 도입된 새로운 Navigate API - Redirect 대체하기 (0)	2022.02.10
[React.js] Re-rendering Issue & Objects are not valid as a React child (0)	2021.03.17
[react] redux로 상태 관리하기 #시작하며 2 (0)	2021.03.09
[react] redux로 상태 관리하기 #시작하며 (0)	2021.03.08
[React.js Hooks] useState, useEffect, useReducer (0)	2021.02.28

현재글[React.js Hooks] React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-deps issue

프론트엔드 개발자의 Today I Learnt

파이썬, CSS, 프론트엔드, 프로그래머스, vue.js, techBlog, javascript, git, Typescript, 리액트, vue, todolist, github, coding test, ESLint, CRA, Frontend, 루비, programmers, React,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Under the Sign of Saturn

[React.js Hooks] React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-deps issue

문제 상황

문제 원인 및 해결

'👩‍💻 > React' 카테고리의 다른 글

'👩‍💻/React'의 다른글

티스토리툴바

[React.js Hooks] React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-deps issue

문제 상황

문제 원인 및 해결

'👩‍💻 > React' 카테고리의 다른 글

'👩‍💻/React'의 다른글

관련글

티스토리툴바