[리액트] 라우터 V5 -> V6로 되면서 멘붕왔던 부분 + 복붙해서 생긴 에러

1. 라우터 V5 -> V6로 업데이트되면서 생긴 문제점.

 

라우터부분 강의를 들으면서 다음과같이 강의 내용대로 코드를 작성하고 실행하였는데 에러가 발생하였음.

저장하고 실행하였더니 다음과같은 에러가 나왔음.

강의내용과 다른부분이 있는지 재차 확인해보았지만 내용은 정확했음. 구글링해보니 버젼이 5에서 6로 업데이트되면서 많은 부분이 변경되었다고 함. 여기서 방법은 두가지임. 에러문구대로 <Routes> 안에 <Route>를 작성하여 업데이트 내용대로 따르거나 낮은 버전으로 다운그레이드 해서 하거나. 일단 다운그레이드 하려면 다음과 같이 터미널에 작성.

 

yarn add react-router-dom@5.3.0

 

버전은 낮은버전 조사해서 작성. 위 명령어를 입력하면 6버전에서 다운그레이드됨. 그리고 정상 작동됨.

 

혹은 6버전대로 하려면 다음과 같이 작성.

<Routes> 안에 <Route>를 작성하고 새로 변경된 element요소에 컴포넌트를 넣으니 정상 작동됨.

 

---

2. 복붙하면서 생긴 에러

위의 두가지 방법대로 진행을 하였는데 일단 Home.js 는 나왔지만 Cat.js 와 Dog.js 는 다음과 같은 에러 메세지가 나오면서 나오지 않았음.

 

 react-jsx-dev-runtime.development.js:117 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

 

구글링해봐도 export에서 스펠링이 틀렸거나 대소문자 구분을 안해서 그렇다고만 나오고 다른 해결법은 없었다. 그런데 아무리 봐도 문제는 없었고 비쥬얼스튜디오코드를 종료하고 다시 실행해도 같은 문제가 반복되었다.

 

그러다가 문뜩 떠오른 생각이, 내가 Home.js 를 작성하고 Cat.js 와 Dog.js 는 Home 의 내용을 복사해서 붙여넣고 Home이라는 단어만 Cat 과 Dog 로만 바꾸고 저장하였다. 혹시나해서 export default 000; 이부분을 지우고 직접 타이핑해서 재작성 후 실행하니 에러가 사라졌다!

 

이런부분은 정말 어떤 부분에서 잘못되었는지 예측하기 어려웠기때문에 많은 시간과 정신적으로 스트레스를 줘서 힘들었다ㅠ