리액트 (3) 썸네일형 리스트형 [React Router] 리액트 라우터의 URL 파라미터 사용 시 404 오류 해결 방법 (React Router v5, webpack과 함께 사용할 경우 publicPath설정) 문제 상황 상품 리스트 페이지 개발 중, 카테고리번호 별로 다른 상품리스트를 렌더링 하기 위해 리액트 라우터의 URL 파라미터를 사용했는데 같은 방식으로 파라미터를 사용하던 다른 프로젝트에선 볼 수 없었던 아래와 같은 404 오류가 떴다. /categories 까지는 오류 없이 페이지가 잘 나타났지만 /categories 뒤에 '/'와 함께 파라미터를 붙이거나 '/'만 붙여도 해당 오류가 발생했다 해결 방법 이전 프로젝트들에서는 마주친 적 없던 오류였고, 공식문서를 봐도 리액트 라우터의 URL 파라미터 사용법엔 문제가 없었기 때문에 프로젝트 자체의 환경설정 부분이 잘못되었을 확률이 높았다. 관련 키워드로 열심히 검색해본 결과 웹팩에서 사용하는 HtmlWebpackPlugin에 publicPath가 설정되.. [React] Can't perform a React state update on an unmounted component. 에러 해결 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. 위 에러는 컴포넌트가 언마운트 되어 사용할 수 없는데도 해당 컴포넌트의 state를 바꾸려고 했을 때 나타나는 에러다. 에러 메시지를 잘 읽어보면, 아무 실행도 되진 않겠지만, 어플리케이션의 메모리 누수가 발생할 수 있으니 useEffect의 cleanup 함수에 구독과 비동기 작업을 모두 취소하는 방식으로 고칠 수 .. [React] React 리액트 Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state. 에러 해결 const logOutButtonClickHandler = () => { localStorage.removeItem('jwt'); localStorage.removeItem('registerState'); location.reload(); }; react_devtools_backend.js:2273 Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state. → 로그아웃 이후 로그인 화면으로 돌아왔을 때 위와 같은 오류가 발생했다. 처음엔 화면이 전부 렌더되지 않았을 때 사용자가 시작하기 버튼 클릭 시 위와같.. 이전 1 다음
