본문 바로가기

WEB/React

[React] cannot read property of undefined(reading 'type') 에러

현재 저는 팀원들과 프로젝트를 진행하고 있습니다. 프론트엔드 3명, 백엔드 3명으로 구성되어 있으며 저는 프론트엔드를 맡게되었습니다.

프로젝트는 다음과 같이 진행중입니다.

  • Java 17
  • Spring Boot 3.2.0
  • Gradle
  • React

에러 발생 상황은 이렇습니다. 

리덕스(Redux)는 JavaScript 앱을 위한 상태 관리 라이브러리로 애플리케이션의 전역 상태를 중앙에서 관리할 수 있어, 다양한 컴포넌트간에 상태를 공유할 수 있게 해줍니다.

저희는 리덕스를 이용해서 로그인한 유저 정보를 관리하고자 하였습니다.

axios로 받아온 로그인 유저정보를 저장하고자 했습니다.

 

LoginForm.js

 

user.js

 

제대로 작동하지 않아 try catch로 에러 내용을 확인하였습니다.

 

axios로 불러오는 데이터는 JSON형태이고 console에 찍어본 res.data도 제대로 나오고 있었기에 문제가 뭔지 한참을 찾았습니다.

같이 저장하는 토큰은 제대로 되었기에 더욱 이해가 안가는 상황이었습니다.

찾아낸 해결책은 다음과 같습니다.

 


loginUser에 중괄호가 빠져있었습니다. 

createSlice로 생성된 userSlice의 일부분인 loginUser를 제대로 임포트 하지 못하고 있어서 발생한 문제였습니다.

다음과 같이 수정 후 정상작동하는것을 확인하였습니다.