error4 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 에러처리 오늘의 에러 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 오늘 발생한 에러는 아니지만 ㅎㅎ 업무를 하면서 위와 같은 에러가 발생했다. useEffect의 cleanup함수를 사용하여서 메모리 누수를 해결하라고 하는 메세지인 것 같다. 왜 이런 에러가 발생했을까? cleanup 함수는 컴포넌트가 언마운트 될 때 실행이 된다. 만약 요청을 통.. 2022. 1. 30. react-dnd 드래그 범위 에러(with. react-tooltip) 이미지를 첨부하고 싶지만, 개발중인 서비스라 문제가 된 부분을 직접 만들어서 추후에 이미지를 첨부해야겠다. react-dnd를 사용하여서 폴더 기능을 만들고 있는 중인데 드래그 범위가 이상하다.... 관련없는 코드를 다 생략하고, 밑에와 같이 useDrag hook을 사용하여 drag를 ref속성 값으로 전달을 해주면 해당 부분이 드래그가 되야한다. const [,drag] = useDrag(() => { ... }) return ( ... ) 하지만, 드래그 된 범위가 해당 태그가 아니라 화면의 1/4범위를 잡아서 엄청 광범위하게 드래그가 되었다. 노가다를 해봐야겠다는 생각이 들어 drag값을 하위 태그에 한번씩 다 넣어 보았고, ReactTooltip에서 발생하는 에러인 것을 찾아냈다. 해당 Cont.. 2022. 1. 9. 모달창 구현, TypeError: Cannot read properties of undefined (reading 'contains') 해결 방법 폴더 탭을 클릭하였을 때, 다른 폴더 리스트가 나오는 작은 모달창을 구현하였다. 이제 모달창이 제거되는 이벤트를 만들어야하는데, 감이 오질 않아서 velog를 참고하였다. velog는 작은 모달창이 띄어진 상태에서 페이지에 있는 모든 버튼들이 활성화 된 상태였고, 모달 바깥을 누르면 모달창이 꺼졌다. 나도 이러한 기능을 구현하고 싶어 구글링을 해보았고, 밑에와 같은 코드를 찾게 되었다. // 생략 const Modal = ({ setModal, modalRef }) => { const modalRef = useRef(); const handleClickOutSide = ({ target }) => { if (!modalRef.current.contains(target)) { setModal(false);.. 2022. 1. 7. Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. 에러 해결법 // 생략 const [keyowrdCounter, setKeywordCounter] = useState(0); items .filter((el) => el.folderName === folder) .map((keyword, idx) => { setKeywordCounter(idx); // 이 부분이 문제! return ; }); // 생략 처음보는 에러가 발생해서 간단하지만 기록해봤다. 보아하니 리랜더링이 많다는 것 같은데 확인해보니 mapping을 하는 곳에서 setKeywordCounter를 실행하였다. setKeywordCounter를 실행하면 state값이 바뀌고 state값이 바뀌면 리랜더링이 되기 때문에 발생하는 에러였다. // 생략 let keywordCounter = 0; items .f.. 2021. 12. 30. 이전 1 다음
