useSelector undefined 뜨면서 렌더링 에러 발생 해결 - Uncaught TypeError: 블라블라 is undefined

useSelector undefined 뜨면서 렌더링 에러 발생

분명 api 잘 연결해서 데이터 받아왔는데, 다른 건 다 되는데, 객체의 일부에 접근하려고만 하면 자꾸 undefined 에러가 뜨면서 동작하지 않았다.

먼저 답부터 말하자면,

initialState 의 초기값을 명확하게 세팅해주지 않아서였다.

내가 받아왔던 데이터의 형식은 아래와 같다.

{
	id:rawoon,
    imgurl: .png,
    photos: [
       {
          num: 0,
          url: .png,
          value: 3
      },
      {
          num: 1,
          url: .png,
          value: 4
      },
   ]
}

그래서 처음의 id 와 imgurl 을 사용하는 컴포넌트는 문제없이 돌아가는 유달리 photos 를 사용하는 컴포넌트는 자꾸 undefined 에러를 발생시키는 것이었다.

그래서 열심히 구글링한 결과 내 데이터 형식에 맞춰서 아래와 같이 작성해주니 문제없이 돌아갔다.
원래는

import { createSlice } from '@reduxjs/toolkit'

export let userDetail = createSlice({
    name: 'userDetail',
    initialState: [],
    reducers: {
        setUserDetail (state, actions) {
            return actions.payload
        },
    }
})
export let { setUserDetail } = userDetail.actions

이렇게 되어있었는데, 내 데이터 형식에 맞춰서

import { createSlice } from '@reduxjs/toolkit'

export let userDetail = createSlice({
    name: 'userDetail',
    initialState: {photos: []},
    reducers: {
        setUserDetail (state, actions) {
            return actions.payload
        },
    }
})
export let { setUserDetail } = userDetail.actions

로 바꾸어주니 에러가 해결됐다.