반응형
리액트 앱을 실행했는데
갑자기 이런 오류가 발생했다.
이게 뭔데...
검색해보니 useEffect에서 데이터를 렌더링 하는데
그 데이터가 useEffect 외부에 존재할 경우 발생한단다.
사실 뭔 말인지 잘 모르겠다...
사실 오류 메시지도 아니고 경고 메시지라서
리액트 앱 실행에는 큰 문제가 없기 때문에
개발과정에서는 신경 안써도 되지만
그래도 문제가 생겼으면 해결은 해봐야지 싶어서
이것저것 시도해봤다.
그 중에서 제일 효과적이었던 방법이
eslint를 무시하도록 코드를 작성하는 것이었다.
리액트는 친절해서 어떤 파일의 몇번째 줄에서 문제가 발생했는지 다 알려준다.
위 이미지에서는 musiccontroller.js 파일의 38번째 줄에서 문제가 생겼다고 알려줬다.
그럼 우리는 37번째 줄에 아래 코드를 집어넣어주면 된다.
// eslint-disable-next-line이 코드는, 바로 다음 줄의 코드에서 eslint를 적용하지 않도록 설정해준다.
eslint가 뭐냐면 자바스크립트 코드에서 문제가 있는 부분을 표시해주는 도구다.
그러니까 위 코드의 의미는
"문제가 있어도 실행은 잘 되니깐 문제가 있는 부분은 그냥 눈감아줘~" 다ㅎ
근본적으로 해결하기 위해서는 useEffect에서 의존하는 부분을 집어넣어주면 되는데
나는 좀 귀찮아서 그냥 eslint를 잠시 끄는 방법을 선택했다.
반응형
