useEffect 의존성 배열

안녕하세요! 이부분은 저도 배재님과 같은 상황을 경험해보았고, 저또한 확실히 찾아보지않고 넘어갔던 부분이라서, 이번기회에 주변에 조언을 구해봤는데요! 제가 찾아본 바로 결론부터 말씀드리자면 린트에서 권고하는 사항처럼 디펜던시에 이펙트내에서 사용되는 state 들을 모두 넣어주는게 좋다 입니다! 배재님과 그리고 저도 겪었던, 이 상황이 발생하는 경우는 대표적으로는 state혹은 useEffect내 함수 설계미스일수 있다고 합니다! 간단한 해결방법으로는 강병진님께서 말씀해주신 disable 라인을 추가해주시는것도 방법이고, 혹은 로직을 리팩토링 해보는것도 좋으실 것 같습니다! 추가로 useEffect에 대한 좋은글이 있어 링크로 공유드립니다! 해당 글에서 배재님이 질문하신 내용도 세세히 다루고 있으니 읽어보시면 좋을것 같습니다~ https://velog.io/@khy226/useEffect-%EC%99%84%EB%B2%BD-%EA%B0%80%EC%9D%B4%EB%93%9C-%EC%9A%94%EC%95%BD

useEffect에 목적은 디펜던시 배열에 걸린 상태가 바뀔 때 실행되는 것에 목적이 있습니다만, 상태가 바뀔 때말고 로직을 처리하다가 다른 상태가 필요한 경우가 있습니다. 그때는 로직에 들어가는 상태가 최신화가 안될 가능성이 있기 때문에 값의 최신화를 위해 디펜던시 배열에 넣어주는 경우가 생기며, 질문자분 오류 역시 useEffect 안에서 사용하는 상태는 모두 디펜던시에 넣어서 최신 상태를 유지해야한다고 할 수 있습니다. 하지만 이 것은 필요없을 때도 Effect가 발생해 원하는 상태 변경때만 신경 쓸 수 없게됩니다 해당 문제는 React를 사용하는 사람들이 많이 공감하는 문제이며, 이를 위해 useEvent라는 rfc도 나오게됩니다. useEvent가 나온 배경 같은 것도 살펴보면 좋을 것 같습니다 😀 https://github.com/reactjs/rfcs/pull/220#issuecomment-1261018254

코드를 봐야 정확하게 알 수 있을 것 같아요.

eslint rule들을 어떻게 설정하셨는지 봐야겠지만, 가장 간단한 방볍은 eslint-disable-next-line을 추가하는 것입니다 관련 블로그 링크를 전달드립니다 https://learn.coderslang.com/0023-eslint-disable-for-specific-lines-files-and-folders/

안넣고 상태가 변경된걸 코드에 반영할 수 없겠져

useEffect를 컴포넌트 렌더링 단계에서 1번만 발생시키고 싶다 하시면 disabled 라인을 넣어서 경고가 안뜨게 하고 그게 아니라면 의존성 배열에 상태값을 다 넣어야 값이 알맞게 들어갈듯 합니다.

제 경험상 저런 경우에는 useEffect를 여러개로 쪼개거나 (기능별로 쪼개지게 됩니다) useRef를 사용하는게 적절한 부분이 useState를 사용하진 않았는지 봐주시면 해결되는 것 같습니다.