[ReactJS] 개발 도중 마주했던 오류 모음 (2022년 11-12월)

React 라이브러리를 이용하여 웹 개발을 하던 도중 마주했던 여러 에러들을 자잘한 것부터 규모가 컸던 것까지 모두 깃허브에 md문서로 정리해두었다. 혹시 비슷한 에러를 또 마주하게 되면 여기에 와서 Ctri+F를 통해 검색해서 찾아보자.

 

• DOM에 직접 접근하여 classList 메소드를 통해 클래스를 추가하고 제거했더니 정상적으로 동작하지 않는다.
• React에서 특정 요소에 이벤트를 연결하고, event 객체를 매개변수로 받아 활용하는 코드를 작성했는데, event is deprecated 에러가 발생했다.
• setState를 통해 상태값을 변경하니 원하는 값이 하나씩 밀린 채 변경되는 바람에, 상태값을 활용한 로직이 내 의도대로 동작하지 않는다.
• (Router를 활용한) React 프로젝트를 초기 세팅 완료하고 실행(npm start)해보았는데, 화면에 아무것도 나타나지 않는다.
• 아래와 같이 코드를 작성했는데 화면에 아무것도 출력되지 않는다. (상위 컴포넌트는 생략)
• 슬라이더를 리엑트로 구현하였는데, 처음에 시간 간격에 따라 페이지가 이동할 때 화면에 사진이 사라져버렸다.
• useEffect를 통해 백엔드에서 데이터를 받아 화면에 출력하려 했으나 (useEffect의 렌더링 특성으로 인해) 오류가 발생했다.
• (위와 동일한 문제) 백엔드에서 데이터를 받아 화면에 출력하려 했으나 아무것도 표시되지 않는다. 해당 데이터는 undefined로 출력된다.
• 컴포넌트 함수 안에 아래처럼 useState의 Modifier 함수 (set으로 시작하는 함수)를 주었다니 무한 렌더링이 발생
• React 프로젝트의 특정 컴포넌트에서 <h3> 태그가 인식이 되지 않는다.
• 백에서 받아온 데이터를 구조 분해 할당할 때 값이 읽혀지지 않는 문제 - Uncaught TypeError: Cannot read properties of undefined (reading '0')
• 토스 페이먼츠 api를 활용한 결제 기능 구현 중 axios를 읽지 못하는 문제가 발생했다.
• React-Router를 사용하여 CRA 배포한 페이지에서 새로고침 시 cannot GET /URL 에러가 발생하고 화면엔 아무것도 표시되지 않는다.
• React-Router를 사용하여 github page에 CRA 배포 시, 홈페이지(도메인) 경로를 참조하지 못하는 문제가 발생한다.
• CRA + JS에서 CRA + TS로 변환하는 중, Cannot use JSX unless the '--jsx' flag is provided.ts(17004) 에러가 발생했다.
• CRA + JS에서 CRA + TS로 변환하는 중, TypeScript로 React를 불러올 때 import 구문에서 에러가 났다.
• CRA + JS에서 CRA + TS로 변환하는 중, index.tsx 파일의 App 파일을 import 하는 코드에서 알 수 없는 오류가 발생했다.

 

GitHub - SangYoonLee1231/ERROR-Note: 📒 개발 중 마주친 🚨에러🚨들을 어떻게 해결했는지 간단히 기록