[React 에러] Cannot read properties of undefined (reading 'get')
이렇게 CreateBoard.js에서 form 입력을 받고, 사용자가 제출 버튼을 누르면 그 다음 단계로 넘어가도록 구현하는 중이다. 이 과정에서 navigate를 사용하여 페이지 이동을 구현했다.
보통 form 제출에서는 navigate를 많이들 사용한다고 하길래!
그런데 이렇게 하면 서버에서 데이터를 못받아오고 자꾸 에러가 났다.
차라리 400번대나 500 에러가 뜨면 요청이 갔지만 중간에 문제가 있었구나... 인데 자꾸 이런 에러가 떠서 당황스러웠다.
그런데 콘솔 창을 잘 보니 그 이유를 찾을 수 있었다.
CreateBoard에서 폼 입력을 받고, 제출 버튼을 누르면 CreateNetwork로 이동하는 구조이다. 두 과정에서 axios interceptor을 사용했는데 CreateBoard.js에서는 인터셉터가 작동 중이라는 로그가 찍혔지만 CreateNetwork.js에서는 그런 로그가 찍히지 않았다.
원인은 navigate와 Link의 차이를 몰랐기 때문이었다.
Link를 통해 어떤 url로 이동할 때는 항상 HTTP 리퀘스트를 보낸다.
하지만 navigate를 통해 이동할 때는 항상 HTTP 리퀘스트를 보내는 것은 아니다.
음? 그럼 form 형식인데 navigate를 쓰지 말란건가?
아니여 그게 아니라 CreateNetwork.js에서 interceptor로 get 요청을 보내지 말고 axios로 get 요청을 보내야함.
깔끔하게 해결 됨.
리액트 쓴지 1주일도 안된 사람은 이런 에러에도 벌벌 떱니다.