React/오류 (4) 썸네일형 리스트형 [오류] Uncaught Error: useRoutes() may be used only in the context of a <Router> component. Uncaught Error: useRoutes() may be used only in the context of a component. index.js 파일에 BrowserRouter를 빼먹어서 난 오류. import 먼저 해주고import { BrowserRouter } from 'react-router-dom'; 태그를 태그로 감싸줬더니 화면이 잘 뜬다.import React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import { BrowserRouter } from 'rea.. [오류] SyntaxError: (경로) : Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (15:4) SyntaxError: (경로) : Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? (15:4) return 으로 여러개의 태그를 반환해서 생긴 오류. return ( Test ); 아래처럼 하나의 태그로 감싸줬더니 해결. return ( Test ); [오류] Uncaught (in promise) ReferenceError: (함수명) is not defined at callback ((파일명).jsx?t=1711695872236:83:9) at (파일명).js:22:7 phyho.jsx 파일에서 기본적인 작업을 하고 pyo.js에 db와 연결하는 함수를 만들어두고 가져와서 사용하는데 import를 까먹고 안해서 난 멍청오류다. pyo.js 아래처럼 각각의 함수들을 정의해줬다면, const getUserinfo = async () => { // 함수로직 } const getMemberinfo = async () => { // 함수로직 } const saveList = async () => { // 함수로직 } phyho.jsx 파일 상단에는 사용할 함수명을 모두 기재해줘야 한다. import { getUserinfo, getMemberinfo, saveList } from "../pyo"; 위의 예시에서 import 에 saveList 를 안적어줘서 발생한 오류. [오류] Uncaught TypeError: Cannot read properties of undefined (reading 'length') at (파일명.jsx) useState로 배열인 'values' 값을 동적으로 할당해주고, 클릭이벤트가 발생하면 setValues로 값을 다시 할당해주는 로직이였는데 중괄호 {} 와 return 유무때문에 발생한 오류였다. 중괄호는 있지만 return을 써주지 않아 return값인 배열을 인식하지 못했고, 배열의 length를 읽어오지 못해 발생한 오류!!!! 아래처럼 써줘야 한다. * 화살표함수 기본 구문은 ( ) => { return ~ } (중괄호 & return 생략) const [values, setValues] = useState([]); .... setValues((prevState) => prevState.filter(item => item.no != no) ); (중괄호 & return 사용) const [va.. 이전 1 다음